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

Question

当我使用砖石附加方法时，附加项目的“left”属性都计算为“0”，导致所有项目都显示在单列中。执行砌体('重新加载')会正确地重新排列所有内容，但每次加载新项目时都会消耗资源。

而且它是从顶部开始动画的，尽管它应该从底部开始。

我的代码如下:

最初:

$('.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 方法 - Masonry(以及同位素，就这一点而言)需要新附加或前置或插入图像的宽度和高度才能正确布局，并通过回调重新触发。 SO 上有很多类似的问题和答案，展示了如何解决这个问题。看the demo here使用 Chrome 的开发工具。