砌體容器調整大小

Question

我正在使用砌體組織圖像組織網站上。如果容器的大小發生變化，是否有辦法從排水溝中改變寬度？

非常感謝！

巴特

Answer 1

你要尋找的是有一個jQuery $（窗口）.resize（）事件偵聽器，窗口的檢查的.WIDTH（），並根據一個簡單的解決方案在寬度上，你可以有一個完全獨立的電話。我試了一下，它工作得很好......

var $gridElement = $(".grid-elements").masonry({ 
    columnWidth: 150, 
    gutterWidth: 12, 
}); 

$(window).resize(function(){ 
    var width = $(window).width(); 

    if(width > 1000) { 
     console.log('greater than 1000'); 
     $gridElement.masonry({ 
       columnWidth: 150, // different column width here 
       gutterWidth: 6, // different gutter width here 
     }); 
    } else if (width < 1000) { 
     console.log('less than 1000'); 
     $gridElement.masonry({ 
       columnWidth: 150, // different column width here 
       gutterWidth: 12, // different gutter with here 
     }); 
    } 
}); 

所以，你可以看到，我們緩存「.grid元素」 jQuery的選擇與.masonry（）調用，然後我們.resize內（）處理程序函數我們檢查窗口的寬度，並用一組新的選項調用.masonry（）方法。請注意，上面的代碼並沒有反彈，所以它會調用.masonry（）來調整每個像素的大小。你可以check out the answer to this Stack question for that。