jQuery Packery插件未正确设置高度

Question

I'm using the Packery plugin to give my image gallery a more interesting layout on a website I'm building.

Every now and then, I visit the page and some of the images are overlapping each other like so:

But then when I refresh the page, it displays it properly:

I tried specifying a height on the container element but to no avail.

Here is the code I'm using:

CSS:

.packery-grid {
    min-height: 500px;
}

.packery-grid-03 {
    width: 20%;
}

.packery-grid-06 {
    width: 40%;
}

.packery-grid figure {
    padding: 15px;
}

jQuery:

$(document).ready(function() {  

    // visuals
    $('.packery-grid').packery({
        // options
        itemSelector: '.packery-grid-item',
        gutter: 0
    });

});

HTML:

        <div class="row">

            <div class="packery-grid">

                <div class="packery-grid-item packery-grid-03">
                    <figure>
                    <a href="#" data-toggle="modal" data-target="#modal-visual">
                    <img src="http://somesite.com/wp-content/uploads/2016/11/255-198x127.jpg" alt="Six" />
                    </a>
                    </figure>
                </div>  

                <div class="packery-grid-item packery-grid-03">
                    <figure>
                    <a href="#" data-toggle="modal" data-target="#modal-visual">
                    <img src="http://somesite.com/wp-content/uploads/2016/11/319-198x127.jpg" alt="Five" />
                    </a>
                    </figure>
                </div>

                <div class="packery-grid-item packery-grid-03">
                    <figure>
                    <a href="#" data-toggle="modal" data-target="#modal-visual">
                    <img src="http://somesite.com/wp-content/uploads/2016/11/IMG_8204-198x127.jpg" alt="Four" />
                    </a>
                    </figure>
                </div>

                <div class="packery-grid-item packery-grid-06">
                    <figure>
                    <a href="#" data-toggle="modal" data-target="#modal-visual">
                    <img src="http://somesite.com/wp-content/uploads/2016/11/157-426x284.jpg" alt="Three" />
                    </a>
                    </figure>
                </div>

                <div class="packery-grid-item packery-grid-06">
                    <figure>
                    <a href="#" data-toggle="modal" data-target="#modal-visual">
                    <img src="http://somesite.com/wp-content/uploads/2016/11/IMG_4445-426x284.jpg" alt="Two" />
                    </a>
                    </figure>
                </div>

                <div class="packery-grid-item packery-grid-03">
                    <figure>
                    <a href="#" data-toggle="modal" data-target="#modal-visual">
                    <img src="http://somesite.com/wp-content/uploads/2016/11/Iceland-198x127.jpg" alt="One" />
                    </a>
                    </figure>
                </div>

            </div>

        </div>

    </div>
</div>

Answer 1

I think I've found the solution on their support page

Unloaded images can throw off Packery layouts and cause item elements to overlap. imagesLoaded resolves this issue.

And so I've modified my code like so:

// visuals
var $grid = $('.packery-grid').packery({
    // options
    itemSelector: '.packery-grid-item',
    gutter: 0
});

    // layout Packery after each image loads
    // to prevent overlapping images
    $grid.imagesLoaded().progress( function() {
        $grid.packery();
    });