打包在页面加载时没有到位

Question

我正在使用Packery来显示图片网格。

以下是我的相关HTML：

-XX:+UseConcMarkSweepGC

这是CSS：

<div class="items">         
    <div class="item" style="background-image: url(http://placehold.it/1000x1000)"></div>           
    <div class="item" style="background-image: url(http://placehold.it/1000x1000)"></div>           
    <!-- 12 times in total -->                      
</div>

最后是JS：

.item{
    width: 25%;
    background-size: cover;
    height: 300px;
}

我的问题

当页面加载时，这就是我得到的：

注意滚动条，网格比屏幕宽。

如果我打开控制台，调整浏览器窗口大小或执行其他任何操作以触发刷新，它将变为：

水平滚动条消失了，项目之间没有排水沟 - 它现在按预期工作。

为什么物品放在首位？我查看了使用该插件的文档和一些笔/小提琴，我看不到我错过的内容。

我尝试使用$(function(){ $('.items').packery(); }); 延迟初始调用，但它不起作用 - 它只会延迟我得到第一个屏幕截图中显示的内容之前的时间，我仍然需要调整窗口大小或触发刷新在物品移动到位之前手动。