javascript - jQuery Packery 插件没有正确设置高度

Question

我正在使用 Packery 插件在我正在构建的网站上为我的图片库提供更有趣的布局。

我时不时地访问该页面，一些图像像这样相互重叠:

但是当我刷新页面时，它会正确显示:

我尝试在容器元素上指定高度但无济于事。

这是我使用的代码:

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

我想我已经在他们的支持页面上找到了解决方案

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

所以我修改了我的代码:

// 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();
    });