在调整大小时更改Masonry的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

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

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