Javascript 圬工.js–；不垂直移动的项目

没有图像，我不知道如何解释这一点

我相当肯定我做的每件事都是正确的，但由于某种原因，div没有下降。这是我的密码：

HTML

---

此外，出于某种原因，在使用Codepen进行渲染时，它似乎起作用：

这与加载图像的时间有关。看一看ImageLoaded插件，我相信它实际上是烤成同位素，砖石的大哥。看看这个：

进一步解释：

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

---

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

我真的没想到会有答案！我从没想过会是这样。非常感谢！看起来砖石工程也能处理这个问题：我还没有实现它，我现在就试着让它工作。酷，同一个人写了同位素，砖石工程和图像绘制，所以这很有意义。

<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>

.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; }