砌體：當找到新的屏幕寬度或窗口寬度時，如何更改columnWidth選項？

Question

我基本上試圖在瀏覽器窗口或屏幕寬度低於某個數字時更改砌體腳本的佈局。當您更改瀏覽器寬度時，我希望它對（實時）做出響應，但此時它會中斷。另外，由於某種原因，只有首先加載的腳本才能工作。我已經測試過Masonry的isResizable：true選項，但它沒有得到我想要的效果。任何人都可以提供修復嗎？這是砌體的頁面，想知道是否有人能幫助找到關於此頁面的解決方案：http://masonry.desandro.com/docs/methods.html

這裏是我的代碼：

function checkWidth() { 

    var winW = $(window).width(); 
    var Body = $('body'); 

    alert(0) 

    if (screen.width >= 1225 || winW >= 1225) { 
    $(document).ready(function() { 

     alert(1) 

     Body.css({ 'background-color':'red' }); 

     // masonry 
     $(function(){ 

     var $container = $('#container'); 

     $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector : '.box', 
     gutterWidth: 8, 
     columnWidth: 146 
     }); 
    }); 

    }); 


}); 
} 

// Start second IF statement 
if (screen.width <= 1224 || winW <= 1224) { 

    $(document).ready(function() { 

     alert(2) 

     Body.css({ 'background-color':'blue' }); 

     // masonry 
     $(function(){ 

     var $container = $('#container'); 

     $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector : '.box', 
     gutterWidth: 8, 
     columnWidth: 113 
    }); 
    }); 

}); 

}); 

} 


} 
$(document).ready(checkWidth); 
$(document).resize(checkWidth); 

編輯============== =

更新代碼：

function checkWidth() { 


var winW = $(window).width(); 
var Body = $('body'); 

alert(0) 

if (screen.width >= 1225 || winW >= 1225) { 


    alert(1) 

    Body.css({ 'background-color':'red' }); 

    // masonry 


    var $container = $('#container'); 

    $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector : '.box', 
     gutterWidth: 8, 
     columnWidth: 146 
    }); 
}); 

} 

// Start second IF statement 
if (screen.width <= 1224 || winW <= 1224) { 

    alert(2) 
    Body.css({ 'background-color':'blue' }); 

    // masonry 


    var $container = $('#container'); 

    $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector : '.box', 
     gutterWidth: 8, 
     columnWidth: 113 
    }); 
}); 

} 
} 

$(document).ready(checkWidth); 
$(document).resize(checkWidth); 

Answer 1

你的函數不應該從窗子爬進去的大小後添加一個新的事件監聽器。當用戶調整窗口大小時，你調用你的函數（$(document).resize(checkWidth);），然後不必要地創建另一個事件監聽器（$(document).ready(function() {...），當DOM準備就緒時（但它應該已經準備就緒），它會觸發你的代碼。

嘗試修復（即刪除該事件處理程序並簡單地將代碼放在那裏）。

編輯：

您需要從$(document).ready(function() {條款拿出你的代碼。此外，您還有另一個DOM就緒事件處理程序（$(function(){ == $(document).ready(function() {）。所以你的代碼應該是這樣的：

if (screen.width >= 1225 || winW >= 1225) { 
    // No $(document).ready here 
    alert(1) 
    Body.css({ 'background-color':'red' }); 

    // No $(function(){ here 
    var $container = $('#container'); 

    $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector : '.box', 
     gutterWidth: 8, 
     columnWidth: 146 
    }); 
} 

對你的第二條if語句做同樣的事情。