jquery-masonry - Masonry - HTML実装方法を使用すると画像が重なる

Question

ページを読み込むと、Masonry の「レンガ」またはアイテムが重なって表示されることがあります。しかし、ブラウザ ウィンドウを小さくしてから大きくすると、項目が正しく表示されます。HTML 実装メソッドを使用しています。私のページへの URL はwww.humansofjohannesburg.orgです。

誰でも助けてもらえますか？

ありがとう

<div class="hoj js-masonry" id="container" data-masonry-options='{ "columnWidth": 247, "itemSelector": ".hoj-item", "gutter": 10, "isResizeBound": true }'>
    <!-- ITEM -->
    <div class="hoj-item">
        <div class="hoj-image">
            <a href="#"><img src="image.jpg" /></a>
        </div>
        <div class="hoj-intro">
            Content text goes here...
        </div>
    </div>
    <!-- ITEM -->
    <div class="hoj-item">
        <div class="hoj-image">
            <a href="#"><img src="image.jpg" /></a>
        </div>
        <div class="hoj-intro">
            Content text goes here...
        </div>
    </div>
    <!-- ITEM -->
    <div class="hoj-item">
        <div class="hoj-image">
            <a href="#"><img src="image.jpg" /></a>
        </div>
        <div class="hoj-intro">
            Content text goes here...
        </div>
    </div>
    <!-- ITEM -->
    <div class="hoj-item">
        <div class="hoj-image">
            <a href="#"><img src="image.jpg" /></a>
        </div>
        <div class="hoj-intro">
            Content text goes here...
        </div>
    </div>