Почему Masonry.js накладывает изображения друг на друга?
Класная статья с решением
$(document).ready(function() {
  $('#content').masonry({
   columnWidth: 320,
   itemSelector: '.item'
  }).imagesLoaded(function() {
   $('#content').masonry('reload');
  });
});
У меня тот же вопрос... никак не могу решить.
Блин не тот адрес набрал=)) Вот и решение=) Немного дергаеться но зато никаких помех=)) Хотя вместо начала $(document).ready() напиши $(window).load()
Вот мой робочий код, хотя тут ищо пишут   нада установить "Modernizr":
$(window).load(function() {
      var container = document.querySelector('#posts');
      var msnry = new Masonry( container, {        
        itemSelector: '.item-post',
          singleMode: false,
// true - если у вас все блоки одинаковой ширины
      isResizable: true,
         isFitWidth: true,
// перестраивает блоки при изменении размеров окна
      isAnimated: !Modernizr.csstransitions
// опции анимации - очередь и продолжительность анимации
      }).imagesLoaded(function() {
         $('#posts').masonry('reload');
         });
   });
1.Пробуйте закрыть дивы сразу :<div class="item">
      <img src="img/single-4.jpg" alt="" />
    </div>
2.Может дело в скрипте? 
3. Тут хороший урок и исходник
www.creativebloq.com/css3/get-started-jquery-mason...