Question

我不知道如何在没有图像的情况下解释这个问题。 Please take a look.

我相当确定我已经完成了所有事情，但由于某种原因，div没有向下移动。这是我的代码：

HTML

<div id="gallery-container" class="js-masonry" data-masonry-options='{
    "columnWidth": ".gallery-column-sizer",
    "gutter": ".gallery-gutter-sizer", 
    "itemSelector": ".gallery-item" }'>
    <div class="gallery-column-sizer"></div><div class="gallery-gutter-sizer"></div>
    <div class="gallery-item"><a href=""><img src="http://lorempixel.com/output/abstract-q-c-1124-736-1.jpg" alt=""></a></div>
    <div class="gallery-item"><a href=""><img src="http://lorempixel.com/output/abstract-h-c-657-1167-2.jpg" alt=""></a></div>
    <div class="gallery-item"><a href=""><img src="http://lorempixel.com/output/abstract-q-c-1055-648-7.jpg" alt=""></a></div>
    <div class="gallery-item"><a href=""><img src="http://lorempixel.com/output/abstract-h-c-803-1184-1.jpg" alt=""></a></div>
    <div class="gallery-item"><a href=""><img src="http://lorempixel.com/output/abstract-q-c-976-939-4.jpg" alt=""></a></div>
    <div class="gallery-item"><a href=""><img src="http://lorempixel.com/output/abstract-q-c-514-492-1.jpg" alt=""></a></div>
    <div class="gallery-item"><a href=""><img src="http://lorempixel.com/output/abstract-q-c-958-636-5.jpg" alt=""></a></div>
    <div class="gallery-item"><a href=""><img src="http://lorempixel.com/output/abstract-h-c-958-1660-7.jpg" alt=""></a></div>
    <div class="gallery-item"><a href=""><img src="http://lorempixel.com/output/abstract-q-c-936-564-5.jpg" alt=""></a></div>
    <div class="gallery-item"><a href=""><img src="http://lorempixel.com/output/abstract-h-c-609-1375-9.jpg" alt=""></a></div>
</div>

CSS

.gallery-column-sizer { width: 30%; }
.gallery-gutter-sizer { width: 5%; }
.gallery-item { width: 30%; margin-bottom: 40px; }
.gallery-item a { display: block; }
.gallery-item img { width: 100%; height: auto; }

另外，由于某些原因，它似乎在Codepen中呈现时起作用：http://codepen.io/ellis/pen/BCsoE

Answer 1

这与加载图像的时间有关。看一下ImageLoaded插件，我相信它实际上已经融入了Isotope，Masonry的大哥。看看这个：http://isotope.metafizzy.co/appendix.html

进一步说明：

页面在图像有时间下载之前加载并执行脚本，这会导致砌体对象认为它们的高度为0.有几种方法可以修复它，上面提到的是快速且相对较快的无痛的方式，另一个是实际告诉每个图像标签究竟有多大。现在......如果允许砌体对象更改宽度，则会有继承问题，因为您不知道容器对象在呈现时的宽度，从而使高度不确定，在javascript之外...它让我们回到选项一。

我通常做的是提供各种各样的＆＃39;封面＆＃39;在砌体包装器内部加载gif，当图像加载插件完成并且渲染了砖石时，你将它淡出。这将防止脚本执行之前的奇怪时刻，其中图像可以完成加载并在单个巨型列中开始渲染，然后剧烈移动到位。

Masonry.js - 不垂直移动的物品

HTML

CSS

1 个答案: