Masonry images overlapping issue

Question

the title pretty much says everything, I did look into the images plugin from masonry yet I had no luck, I wonder if anyone could help?

The script does many things,

Answer 1

I've experienced the same problem and I developed 2 methods to combat it. First off reload the container after you have appended the onclick-image.

1. container.masonry('reload');

Second, and probably more important, dynamically correct the height of the surrounding div to match the height of the image:

2. // bricks correct height
   var brick = $("#marker #container .brick"); 
   brick.each(function() {
          var content = $(this).find(">div");
          var img = $(this).find("img");
           content.css({
            height: img.attr("height")
           });
        });

So my brick is looking like this:

  <div style="height: 284px; position: static; top: -133px;" class="test">  
       <a class="arrow" href="#" target="_self"><img class="img" src="test.jpg" width="374" height="284"></a>
  </div>

Edit: In your code you have the same problem, there is no height in the style.

<div style="position: absolute; left: 330px; top: 280px;" class="box item 3d">

And it seems to me you have a problem with the width, too. I think you need to use a smaller width for the column. A good value would be the width of the small image and some border.

Answer 2

 jQuery(function(){
   var $container = $('#container');
   $container.imagesLoaded( function () {
       itemSelector: '.box',
       animate: true
   });
  });

Source: jQuery Masonry Images