Masonry.js – Items not moving vertically

问题:

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

回答1:

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.