砌体图像重叠的问题

标题几乎说了一切，我确实调查了砌体的图像插件，但我没有运气，我想知道是否有人可以提供帮助？

脚本做很多事情，它有filter位，动画，显示/隐藏，ajax来获取内容等等。如果有人可以调查它为什么重叠以及我如何能够解决它，我会很高兴代码如下：

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"); $('Close"').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);  

Answer 1

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

资料来源： jQuery Masonry Images

Answer 2

我遇到了同样的问题，我开发了两种方法来对抗它。 首先在附加onclick-image后重新加载容器。

 1. container.masonry('reload'); 

其次，可能更重要的是，动态校正周围div的高度以匹配图像的高度：

 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") }); }); 

所以我的砖看起来像这样：

编辑：在你的代码中你有同样的问题，风格没有高度。

在我看来你也有宽度问题。 我认为你需要为列使用较小的宽度。 一个好的值是小图像的宽度和一些边框。