jQuery masonry附加结果仅显示在单列中

Question

当我使用附加砌体的方法时，附加项目的“left”属性计算为“0”，导致所有项目显示在单个列中。做一个砌体（'reload'）正确地重新排列所有东西但是每次加载一个新项目时它都会成为一种资源。

它也是从顶部制作动画，即使它应该从底部开始。

我的代码如下：

最初：

$('.pinboard-list').masonry({
    itemSelector : '.grid-item'
});

然后为每个项目

function renderitems(){
    boxes = $(html);
    $('.pinboard-list').append(boxes).masonry('appended',boxes,true);
}

我错过了一些明显的东西吗？

修改

JS Fiddle

http://jsfiddle.net/LTFG8/1/

Answer 1

您需要使用文档中所示的imagesLoaded方法 - 砌体（和Isotope，就此而言）需要新添加或前置或插入图像的宽度和高度才能正确布局，并使用回调重新触发。 SO上有很多类似的问题和答案，展示了如何解决这个问题。使用Chrome的devtools查看the demo here。

Answer 2

感谢@Systembolaget提供线索。容器内部必须有一些东西才能使附加方法起作用。添加这样的东西修复它：

<li class="grid-item">&nbsp;</li>

修复它