各位!
我正在开发我的个人网站 - 一个在线作品集。这是我从头开始编写的第一个网站,所以我不熟悉 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>
我认为问题在于图像高度不固定。但也许这是整个网页布局的错误。
最佳答案
您的问题是当您执行 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>
来源:
我自己也遇到过这个问题! :)
关于javascript - 第一次打开网页时 masonry 元素崩溃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25312209/