砌体容器调整大小

Question

我正在使用Masonry在投资组合网站上组织图像。如果容器的大小发生变化，有没有办法改变排水沟的宽度？

非常感谢！

巴特

Answer 1

你正在寻找的一个简单的解决方案是拥有一个jQuery $（window）.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
         });
    }
});

因此，正如您所看到的，我们使用.masonry（）调用缓存“.grid-elements”jQuery选择，然后在我们的.resize（）处理函数中检查窗口的宽度，并回想起.masonry（）方法带有一组新的选项。

另外请记住，上面的代码没有去抖动，所以它会为你调整大小的每个像素调用.masonry（）。你可以check out the answer to this Stack question for that。