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:

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

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.