3

大家！

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

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

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

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

图像大小的 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>

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

4

1 回答 1

3

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

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

<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

于 2014-08-14T15:50:17.763 回答