砌体留下空隙

Question

我遇到了砌体的问题，并且在努力理解它为什么会发生。

基本上，我有一个4列的项目网格。 当第3个项目比其余项目大时（3x更大=容器宽度的75％），砌体无法填补这个空白。

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

congole.log('Please check jsFiddle');

以前有人遇到过这个吗？

提前致谢

Answer 1

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

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

http://jsfiddle.net/u7avyr2u/

编辑：我的理由错了。但解决方案有效......

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

将第一个div的类从sizer更改为item并更改以下代码也将解决问题

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

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

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

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

Answer 2

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

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