jquery - 砌体容器调整大小

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() 。你可以查看这个 Stack question 的答案。