砌体网格布局不适用于jQuery插件，因为网格项的高度降低到0

Question

我们正在使用此jQuery masonry plugin来渲染类似于Pinterest的砌体布局。

初始化插件时，所有网格项目的高度都归零。

This question，this one和this one相似，但没有帮助。

为了进行测试，我们手动等待所有图像加载，然后调用插件的初始化脚本，如下所示：

function initMasonryLayout() {
    $("#mainBox").masonry({
      itemSelector: ".itemBox",
      columnWidth: 200
    });
}

网格容器（#mainBox）和网格项目（.itemBox）的简化HTML：

<div id="mainBox">
            <a href="/design/iphone_xs_max?id=15" class="itemBox">
                <img class="thumbnail" src="/designs/thumbnails/iphone_xs_max/15.jpg" alt="Template for Iphone Xs Max">
                <div class="customize">
                    <span>CUSTOMIZE</span>
                </div>
            </a>
            <a href="/design/iphone_xs_max?id=16" class="itemBox">
                <img class="thumbnail" src="/designs/thumbnails/iphone_xs_max/16.jpg" alt="Template for Iphone Xs Max">
                <div class="customize">
                    <span>CUSTOMIZE</span>
                </div>
            </a>
</div>

用于网格容器（#mainBox）和网格项目（.itemBox）的CSS：

#mainBox {
    flex-grow: 1;
    display: grid;
    width: 100%;
    height: 100%;
    padding: 25px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 1fr;
    grid-gap: 25px;
    box-sizing: border-box;
}


.itemBox {
    position: relative;
    box-sizing: border-box;
    max-width: 250px;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    transition: 0.5s ease;
    box-shadow: 0 2px 3px rgba(188, 188, 188, .2);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}


.itemBox:before {
content: "";
display: block;
padding-top: 150%;
}


.itemBox:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .2);
}

要重现该问题，请访问https://myhotpot.io，并在页面加载后，从开发者控制台调用initMasonryLayout函数。