Перекрытие изображений при использовании jQuery Masonry

Question

Я пытаюсь создать макет некоторых изображений (наряду с некоторым текстом) с помощью плагина jQuery Masonary.

Проблема в том, что изображения нижнего ряда накладываются изображениями из верхней строки.

jQuery(function ($) { 
    $('#container').masonry({ 
     itemSelector: '.item', 
     gutter: 10 
    }); 
}); 

Я также пробовал использовать imageLoaded, но не уверен, как использовать его правильно (используется в скрипке).

Расположение элементов html ниже.

<div id="container"> 
    <div class="item"> 
     <img src="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185/zkrTbOKUt7w7x8TkLvR2qXZAKd3.jpg"> 
     <p> <a href="http://localhost/movie/101299">The Hunger Games: Catching Fire</a></p> 
    </div> 

    <div class="item">...</div> 
    <div class="item">...</div> 
</div> 

Нижеприведенный CSS применяется.

.item { 
    width: 185px; 
    height: 200px; 
} 

Fiddle: http://jsfiddle.net/EVwXx/4/

Answer 1

Вы устанавливаете фиксированную высоту для .item. Удаление его должно помочь: fiddle.