1

我正在使用这个插件： 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。我该怎么做呢？

4

2 回答 2

4 
columnWidth: $(document).width() > 1225 ? 146 : 113
于 2012-02-08T15:39:31.550 回答
0

如果您在调整窗口大小时执行此操作，那么您希望将处理程序附加到调整大小事件。在您的事件处理程序中，如果合适，请调用 $(yourdiv).masonry({columnWidth: })。

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

于 2012-02-08T15:48:37.477 回答