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

我正在使用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>

最佳答案

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


  卸载的图像会脱离Packery布局并导致项目元素
  重叠。 imagesLoaded解决了此问题。


因此，我修改了我的代码，如下所示：

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

关于javascript - jQuery Packery插件未正确设置高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40984129/