在调整大小时更改砌体的columnWidth选项

Question

我正在使用此插件： http : //masonry.desandro.com/

我目前正在初始化960px布局的插件，我的代码是：

<script>

$(function(){

    var $container = $('#container');

    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.box',
        gutterWidth: 8,
            // Want to change this here:
        columnWidth: 113
      });
    });

  });
</script>

当屏幕宽度或浏览器窗口宽度大于1225px时，我想将columnWidth数从113更改为146。 我该怎么做呢？

Answer 1

columnWidth: $(document).width() > 1225 ? 146 : 113

Answer 2

如果要在窗口调整大小时执行此操作，则需要将处理程序附加到调整大小事件。 在事件处理程序中，如果合适，调用$（yourdiv）.masonry（{columnWidth：}）。

您可能还想在这里查看jquery.resize插件： http ://benalman.com/projects/jquery-resize-plugin/-一些（大多数）浏览器会在调整窗口大小时不断发送调整大小事件，如果用户在阈值附近徘徊，可能会导致大量重新布局。