砌體圖像重疊問題

Question

標題幾乎說了一切，我看了一下砌體的圖像插件，但我沒有運氣，我想知道有沒有人可以幫忙？

該腳本做了很多事情，它有過濾器位，動畫，顯示/隱藏，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"); 
        $('<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 
    }); 
    }); 

來源：jQuery Masonry Images

Answer 2

我遇到了同樣的問題，我開發了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") 
      }); 
     }); 

所以我的磚看起來像這樣：

<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> 

編輯：在你的代碼中你有同樣的問題，風格沒有高度。

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

在我看來，你也有寬度問題。我認爲你需要使用一個較小的寬度列。一個好的價值將是小圖像和一些邊界的寬度。