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

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

尝试在所有内容都已加载时执行。我建议隐藏所有内容，直到那一点，但这超出了这个问题的范围。

<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

第一次打开网页时，砌体项目会崩溃

1 个答案: