Masonry.js –物品不能垂直移动 [英] Masonry.js – Items not moving vertically

问题描述

我不知道如何在没有图像的情况下对此进行解释. 请看看.

我相当确定我已经正确完成了所有操作，但是由于某些原因，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

解决方案

这与加载图像的时间有关.看一下ImageLoaded插件，我相信它实际上已经被砌入石工的大兄弟Isotope中了.看看这个: http://isotope.metafizzy.co/appendix.html

进一步说明:

页面在图像有时间下载之前加载并执行脚本，然后这使砖石对象认为它们的高度为0.有几种方法可以修复它，上面提到的是相对快速且相对的方法.轻松的方法，另一种方法是实际上告诉每个图像标签确切的大小.现在...如果允许砌体对象 change 宽度存在继承问题，因为您不知道渲染时容器对象的宽度是多少，从而使高度无法确定，在javascript ...之外，这使我们回到选项一.

我通常要做的是在砌体包装上放一些不同的封面"，里面有一个加载gif，当加载的图像插件完成并且砌体被渲染时，您将其淡出.这样可以避免在脚本执行之前发生怪异的时刻，在该时刻图像可以完成加载并开始在单个巨型列中呈现，然后猛烈地移动到适当位置.

I don't know how to explain this without an image. Please take a look.

I'm fairly sure I've done everything correctly, but for some reason the divs are not moving down. Here's my code:

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

Also, for some reason it seems to working when rendering in Codepen: http://codepen.io/ellis/pen/BCsoE

解决方案

This has to do with the timing of the images being loaded. Take a look a the ImageLoaded plugin, I believe it is actually baked into Isotope, Masonry's big brother. Take a look at this: http://isotope.metafizzy.co/appendix.html

Further Explanation:

The page loads and executes the script before the images have time to download, this then causes the masonry objects to think they have a height of 0. There are a few ways to fix it, the above mentioned is the quick and relatively painless way, and the other is to actually tell every image tag exactly how large it is. Now... that has an inherit problem if you allow the masonry objects to change width, since you have no idea what width the container object is going to be when it renders, thus making the height indeterminable, outside of javascript... which loops us back around to option one.

What I generally do is put some variety of 'cover' over the masonry wrapper with a loading gif inside it, and when the images loaded plugin finishes and the masonry is rendered, you fade it out. This will prevent a weird moment prior to the script executing where images may finish loading and start rendering in a single, giant column, then moving violently into place.

这篇关于Masonry.js –物品不能垂直移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！