jQuery 砌体。调整大小时更新列宽度

Question

我试图弄清楚如何在调整浏览器窗口大小时更改流体砌体布局的列宽度。因此，当浏览器宽度小于 1300px 时，columnWidth 会从 4 切换到 3。
这是我的 jQuery:

jQuery(document).ready(function() {

        jQuery('#thumb-wrap, #thumb-wrap-2').masonry({
          itemSelector: '#thumb-container-1, #thumb-container-2',
          // set columnWidth a fraction of the container width
          columnWidth: function( containerWidth ) {
            return containerWidth / 4;
          }

          });
    });

这可能吗？

Answer 1

通过调整窗口大小来重新定义怎么样？

$(window).resize(function() {
    $('#thumb-wrap, #thumb-wrap-2').masonry({
        itemSelector: '#thumb-container-1, #thumb-container-2',
        columnWidth: function(containerWidth) {
            var num = (containerWidth > 1300) ? 4 : 3;
            return containerWidth / num;
        }
    });
});