javascript - Masonry.js – 元素不垂直移动

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 插件，我相信它实际上是融入了 Masonry 的老大哥 Isotope。看看这个:http://isotope.metafizzy.co/appendix.html

进一步说明:

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

我通常做的是在砖石包装上放置一些“封面”，里面有一个加载 gif，当图像加载插件完成并且砖石被渲染时，你将它淡出。这将防止在脚本执行之前出现奇怪的时刻，其中图像可能会完成加载并开始在一个巨大的列中呈现，然后猛烈地移动到位。