jquery - ページの読み込み時に Packery が配置されない

Question

Packery 画像のグリッドを表示するために使用しています。

ここに私の関連する HTML があります:

<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>

CSS は次のとおりです。

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

そして最後に JS :

$(function(){
    $('.items').packery();
});

私の問題

ページが読み込まれると、次のようになります。

スクロールバーに注目してください。グリッドは画面よりも広いです。

コンソールを開いたり、ブラウザー ウィンドウのサイズを変更したり、何か他のことを行って更新をトリガーしたりすると、次のようになります。

水平スクロールバーがなくなり、アイテム間にガターがなくなりました。意図したとおりに機能するようになりました。

そもそもアイテムが適切に配置されていないのはなぜですか? ドキュメントと、プラグインを使用したいくつかのペン/フィドルを見ましたが、何が欠けているのかわかりません。

を使用して最初の呼び出しを遅らせようとしましsetTimeout()たが、うまくいきません。最初のスクリーンショットに表示されているものを取得するまでの時間を遅らせるだけです。アイテムが移動する前に、ウィンドウのサイズを変更するか、手動で更新をトリガーする必要があります。