首次打开网页时，砌体项目塌陷

Question

大家！

我正在开发我的个人网站 - 一个在线作品集。这是我从头开始编写的第一个网站，所以我是 HTML、CSS、JavaScript 和 PHP 的新手。事实上，我对 JavaScript 和 PHP 的了解是基本的，所以我使用的是现成的解决方案。我使用的解决方案之一是 Mansonry 网格布局库，但不幸的是它不能按我的意愿工作。问题是，当我第一次打开网页时，所有图像都崩溃了。当我更新页面时，图像正确对齐。我想知道，如何解决？

我正在使用 Masonry 来布局项目页面 (http://vprilenska.netai.net/design_rigams.php)。我希望图书馆项目排成四行。每个库项目都是一个带有图像和文本的 div。 Divs 向右浮动。

<div class="item img">  
    <a href="image1.jpg">
        <img src="image1.jpg"/>
        <p>caption</p>
    </a>
</div>

所有图像的高度不同。图像宽度取决于列宽。列宽和间距由元素决定，而元素又以浏览器窗口宽度的百分比设置。

图像大小的 CSS：

.item img {
    max-width: 100%;
    height: auto;
}

用于列宽和间距大小元素的 HTML 和 CSS：

<div class="col_width"></div>   
<div class="gut_width"></div>

.col_width, .item {
    width: 22.5%;
}

.gut_width {
    width: 2%;
}

砌体脚本，位于结束体和html标签之间：

<script src='masonry.js'></script>
<script>
    var container = document.querySelector('#masonry');
    var masonry = new Masonry(container, {
        gutter: container.querySelector('.gut_width'),
        itemSelector: '.item',
        columnWidth: container.querySelector('.col_width')
    });
</script>

我认为问题出在事实上，图像高度不是固定的。但也可能是网页整体布局的问题。

Answer 1

您的问题是执行 Masonry 定位时未加载图像（因此没有尺寸）。重新加载时它起作用的原因是因为图像被缓存了。

尝试在所有内容加载完毕后执行。我建议在此之前隐藏所有内容，但这超出了这个问题的范围。

<script>
    function masonry_init(){
        var container = document.querySelector('#masonry');
        var masonry = new Masonry(container, {
            gutter: container.querySelector('.gut_width'),
            itemSelector: '.item',
            columnWidth: container.querySelector('.col_width')
        });
    }
    window.onload = masonry_init;
</script>

来源：

我自己也遇到过这个问题！ :)

另外，MDN - GlobalEventHandlers.onload