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

Question

当我使用砖石附加方法时，附加项目的“左”属性都计算为“0”，导致所有项目都显示在单个列中。做一个 masonry('reload') 可以正确地重新排列所有内容，但是每次加载新项目时都会占用资源。

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

我的代码如下：

最初：

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

然后对于每个项目

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

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

编辑

JS小提琴

score 3 · Accepted Answer

您需要使用文档中显示的 imagesLoaded 方法 - Masonry（和同位素，就此而言）需要新附加或前置或插入图像的宽度和高度才能正确布局，并通过回调重新触发。SO上有许多类似的问题和答案，展示了如何解决这个问题。使用 Chrome 的开发工具查看这里的演示。

score 1 · Accepted Answer

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

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

修复它

2 回答 2