砌体容器调整大小

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。