Jquery Masonry：在调整窗口大小之前，排水沟不正确答案

【问题标题】：Jquery Masonry: Incorrect gutters until window is resizedJquery Masonry：在调整窗口大小之前，排水沟不正确
【发布时间】：2013-02-06 22:48:02
【问题描述】：

我有一个包含三列的百分比宽度容器。我给这些列固定宽度的排水沟是这样的：

width: -webkit-calc( 33.33% - 16px );
width: -moz-calc( 33.33% - 16px );
width: calc( 33.33% - 16px );

这是我的 Masonry 代码，其中我在调整窗口大小时更改列数：

$( window ).load( function() {
    var columns    = 3,
    setColumns = function() { columns = $( window ).width() > 959 ? 3 : $( window ).width() > 640 ? 2 : 1; };

    setColumns();
    $( window ).resize( setColumns );

    $( '#main-posts' ).masonry({
        itemSelector : '[class*=main-posts-]',
        columnWidth : function( containerWidth ) { return containerWidth / columns; }
    });
});

加载页面时列之间的间距太大，但在调整窗口大小时它们会自行纠正。有人可以帮我解决这个问题吗？

这里是重新设计的链接，它处于开发的早期阶段：http://keithpickering.net/redesign/

容器上的绿色背景只是为了帮助说明正在发生的事情。

谢谢大家。

【问题讨论】：

我看到了你在CSS-Tricks 上提出的同样问题。你有没有找到解决办法？我遇到了同样的问题：在我调整窗口大小之前，排水沟有点太大了。

标签： jquery html css jquery-masonry

【解决方案1】：

遇到了同样的问题，页面加载完成后调用layout方法解决了。不优雅，但很有效。

$(window).load(function(){ 

    var $container = $('#container');
    $container.masonry({
      gutter: 0,
      itemSelector : '.content-box',
      columnWidth: ".grid-sizer",
      isResizable: true,
    });
   /// call the layout method after all elements have been loaded
   $container.masonry();

});

http://masonry.desandro.com/methods.html#layout

【讨论】：

你说得对，它有效。这才是最重要的;)