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

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

卸载的图像可能会抛弃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();
    });

jQuery Packery插件未正确设置高度

1 个答案: