jquery-masonry - Masonry - 使用 HTML 实现方法时图像重叠

Question

当我有时加载页面时，我的砌体“砖块”或项目重叠。但是当我让我的浏览器窗口变小然后变大时，这些项目会正确显示。我正在使用 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>