Элементы кладки перекрывают изображения

Question

Если вы посетите этот сайт (http://www.infismash.com/), вы увидите, что элементы накладываются друг на друга из-за того, что изображения загружаются после загрузки страницы.

Я использую следующий синтаксис:

<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 0, "itemSelector": ".masonry-content" }' > 
    <div class="small-12 large-4 columns masonry-content"> 
     <article> 
     ... 
     </article> 
    </div> 
</div> 

Это один работает хорошо, когда изображения кэшируются, но когда нагрузка изображения после содержания кладки загружена, он перекрывается.

Любые предложения по решению этой проблемы?

Спасибо.

РЕДАКТИРОВАТЬ

v1.11.1 JQuery в заголовке.

Я добавил плагин imagesLoaded и теперь скрипты (в сноске), как это:

<script type='text/javascript' src='../masonry.pkgd.min.js'></script> 
<script type='text/javascript' src='../imagesloaded.pkgd.js'></script> 

Оба они называются, и я пытаюсь добавить кладку на следующее:

<div id="container"> 

    <div class="small-12 large-4 columns masonry-content"> 
     <article> 
     ... 
     </article> 
    </div> 

    <div class="small-12 large-4 columns masonry-content"> 
     <article> 
     ... 
     </article> 
    </div> 

    <div class="small-12 large-4 columns masonry-content"> 
     <article> 
     ... 
     </article> 
    </div> 

</div> 

Я использую следующий JavaScript для запуска кладки и imagesLoaded:

<script type="text/javascript"> 
    var $container = $('#container'); 

    $container.imagesLoaded(function(){ 
     $container.masonry({ 
     itemSelector : '.masonry-content' 
     }); 
    }); 
</script> 

Этих не работает.

Проще говоря, я пытался добавить только кирпичную кладку, как это:

<script> 
    $(function(){ 
     $('#container').masonry({ 
     // options 
     itemSelector : '.masonry-content', 
     columnWidth : 240 
     }); 
    });  
</script> 

Это не работает также.

Любая помощь?

EDIT

Я добавил class="js-masonry"<div id="container"> и теперь кладочных работ, но imagesLoaded не работает. Вы можете проверить ссылку, указанную в верхней части этого сообщения.

Answer 1

Необходимо загрузить изображения, которые будут загружены и активироваться Masonry. Рекомендуемый плагин David DeSandro (автор) - imagesloaded, а реализация проста:

var $ container = $ ('# container');

$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector : '.box' 
    }); 
}); 

Вы можете увидеть пример на Masonry docs.

Answer 2

Добавьте imagesloaded плагин найденный в http://desandro.github.io/imagesloaded/

Я думаю, что у меня есть для вас решение. Это работает?

http://codepen.io/tylerism/pen/LVeNKa

HTML

<h1>Masonry + imagesLoaded</h1> 
<div id="container"> 
    <img class="item" src="http://placebear.com/300/300" /> 
    <img class="item" src="http://placebear.com/500/300" /> 
    <img class="item" src="http://placebear.com/300/500" /> 
    <img class="item" src="http://placebear.com/300/300" /> 
    <img class="item" src="http://placebear.com/500/300" /> 
    <img class="item" src="http://placebear.com/300/500" /> 
    <img class="item" src="http://placebear.com/300/300" /> 
    <img class="item" src="http://placebear.com/500/300" /> 
    <img class="item" src="http://placebear.com/300/500" /> 
    <img class="item" src="http://placebear.com/300/500" /> 
    <img class="item" src="http://placebear.com/300/300" /> 
    <img class="item" src="http://placebear.com/500/300" /> 
    <img class="item" src="http://placebear.com/300/500" /> 
    <img class="item" src="http://placebear.com/300/500" /> 
    <img class="item" src="http://placebear.com/300/300" /> 
    <img class="item" src="http://placebear.com/500/300" /> 
    <img class="item" src="http://placebear.com/300/500" /> 
</div> 

JS

$(function() { 
    imagesLoaded('#container', function() { 
    var $container = $('#container').masonry({ 
     itemSelector: '.item', 
     columnWidth: 200 
    }); 
    }); 
}); 

Я не точное настройки, так что трудно для меня, чтобы проверить это сам. Если это не сработает, мы можем попробовать что-то другое.