javascript - 第一次打开网页时 masonry 元素崩溃

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%;
}

Masonry 脚本，位于结束主体和 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