Masonry.js - Предметы не движутся вертикально

Question

Я не знаю, как объяснить это без изображения. Пожалуйста, взгляните.

Я вполне уверен, что все сделал правильно, но по какой-то причине 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, я полагаю, что он действительно встроен в Изотопу, старшего брата Масонри. Взгляните на это: http://isotope.metafizzy.co/appendix.html

Дальнейшее объяснение:

Страница загружает и выполняет сценарий до того, как изображения успеют загрузить, тогда это заставляет каменные объекты думать, что они имеют высоту 0. Есть несколько способов исправить это, вышеупомянутый является быстрым и относительно безболезненным способом, а другой - сказать каждому тегу изображения, насколько он велик. Теперь... это имеет наследственную проблему, если вы позволите каменным объектам изменять ширину, так как вы не знаете, какой будет ширина контейнерного объекта при рендеринге, что делает высоту неопределяемой вне javascript... который возвращает нас к первому варианту.

Что я обычно делаю, так это накладываю несколько разных "обложек" на обертку каменной кладки с загрузочным gif-файлом внутри него, и когда плагин загруженных изображений заканчивается, а каменная кладка отрисовывается, вы затухаете. Это предотвратит странный момент перед выполнением сценария, когда изображения могут закончить загрузку и начать рендеринг в одном гигантском столбце, а затем резко перемещаться на место.