砌体留空答案

【问题标题】：Masonry leaving empty gap砌体留空
【发布时间】：2014-09-18 12:53:16
【问题描述】：

我在使用 Masonry 时遇到问题，并且很难理解为什么会这样。

基本上，我有一个 4 列的项目网格。当第 3 项大于其余项（3 倍大 = 容器宽度的 75%）时，砌体无法填补该间隙。

我创建了一个 jsfiddle 来演示这个问题： http://jsfiddle.net/7ZVb7/2814/

congole.log('Please check jsFiddle');

以前有人遇到过这种情况吗？

提前致谢

【问题讨论】：

【解决方案1】：

~~div 以相同的顺序排列。为了填补空白，您需要在“更大的 div”之前有 4 个 div（不包括具有“sizer”类的那个）。~~

<div class="item">19</div><!-- Just Added this -->

编辑：我的推理是错误的。但解决方案有效...

您的第一个 div 不在结果中...我不知道这是不是故意的。如果唯一的原因是传递给 Masonry，则不需要 sizer 类。

把第一个div的class从sizer改成item，改下面的代码也能解决问题

// Init Masonry
$('#container').masonry({
    itemSelector: '.item',
    columnWidth: '.item'
});

潜在原因：这可能是他们脚本中的错误。我尝试了列宽：总宽比的不同变化。对于当前行中未用完的列，它似乎只填补了前一行的空白。

这会给你一个更好的主意： http://jsfiddle.net/7ZVb7/2815/

所以要让布局正确。您需要在更大的单元格之前有 X 的 div 数，其中 X*columnwidth = width-of-bigger-cell

【讨论】：

感谢您的回答，但您说的不对。将 sizer 类更改为 item，意味着打开的 div 现在是第 4 个而不是第 3 个，这就是它起作用的原因。
问题是第 3 列中的项目无法正常打开。砌体使用 .grid-sizer 将 columnWidth 设置为 %。通过将 .grid-sizer 重命名为 .item，之前的第 3 项现在变成了第 2 项 - 一直运行良好。

【解决方案2】：

我找到的解决方案是使用 Packery！ http://jsfiddle.net/7ZVb7/2816/

$('#container').packery({
    itemSelector: '.item',
    columnWidth: '.sizer'
});

【讨论】：