Masonry problem overlaps

Question

the name pretty much says it all, I looked at the masonry images plugin, but I had no luck, I wonder if anyone can help?

The script does a lot of things, has a filter bit, animation, show / hide, ajax to get content, etc. etc. I would be happy if anyone could investigate why it overlaps and how I can resolve it based on the code below:

jQuery(function(){ jQuery('#container').masonry({ itemSelector: '.box', animate: true }); }); (function ($) { // Get all menu items with IDs starting with "filter-" and loop over them $(".menu li[id|=filter]").each(function () { // Get the ID add extract the page class name from it (remove "filter-" from it) var type = $(this).attr("id").replace("filter-", ""); // Get the items in the "webbies" list with that class name var items = $("#container div[class~=" + type + "]"); // Don't do anything if there aren't any if (items.length == 0) return; // Get a list of the other items in the list var others = $("#container>div:not([class~=" + type + "])"); // Add a click event to the menu item $("a", this).click(function (e) { // Stop the link e.preventDefault(); // Close open item if (openItem) { close(openItem); } items.removeClass("inactive").animate({opacity: 1}); others.addClass("inactive").animate({opacity: 0.2}); }); }); $(".reset-filter a").click(function (e) { e.preventDefault(); if (openItem) close(openItem); $("div.box.inactive").removeClass("inactive").animate({opacity: 1}); }); var openItem; // Opens an item var open = function (item) { // Close open item if (openItem) close(openItem); item.addClass("loading"); $("img", item).first().hide(); item.width(340); item.height(600); if (!item.data('loaded')) { $("div.fader", item).load($("a", item).first().attr("href") + " #content", function () { stButtons.locateElements(); stButtons.makeButtons(); stWidget.init(); $("#container").masonry('reloadItems', function () { $("div.fader", item).animate({opacity: 1}, function () { item.removeClass("loading"); $('<a href="#" class="close">Close</a>"').appendTo(this).click(function (e) { e.preventDefault(); close(item); $(document).scrollTo( $("#navigation-block"), 600, {offset:-50} ); }); $("div.info", item).fadeIn("slow", function () { $(document).scrollTo( $(".info"), 600, {offset:80} ); }); }); }); item.data('loaded', true); }); } else { item.removeClass("loading"); $("#container").masonry('reloadItems', function () { $("div.fader", item).animate({opacity: 1}, function () { $("div.info", item).fadeIn("slow", function () { $(document).scrollTo( $(".info"), 600, {offset:80} ); }); }); }); } // Set open item openItem = item; }; // Closes an item var close = function (item) { $("div.fader", item).animate({opacity: 0}); $("div.info", item).hide(); item.animate({width: 150, height: 100}, function () { $("img", item).first().fadeIn("slow"); $("#container").masonry('reloadItems'); }); // Reset open item openItem = null; }; $("#container div.box").each(function () { var item = $(this); item.data('loaded', false); $("div.fader", item).css("opacity", 0); $("a.close", item).click(function (e) { e.preventDefault(); close(item); $(document).scrollTo( $("#navigation-block"), 600, {offset:-50} ); }); $("a.showMe", item).click(function (e) { e.preventDefault(); if (item.hasClass("inactive")) return; open(item); }); }); })(jQuery); </script> 

Answer 1

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

Source: jQuery Images of Freemasonry

Answer 2

I had the same problem, and I developed 2 methods to deal with it. First reload the container after adding the onclick image.

 1. container.masonry('reload'); 

Secondly, and, more importantly, dynamically adjust the height of the surrounding div according to 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 looks 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, in style there is no height.

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

And it seems to me that you have a problem with 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.