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插件，相信它其实是烘焙到了Isotope，Masonry的老大哥。看看这个：http://isotope.metafizzy.co/appendix.html

进一步说明：

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

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