Hình ảnh xây dựng chồng chéo vấn đề

Question

tiêu đề khá nhiều nói mọi thứ, tôi đã nhìn vào các plugin hình ảnh từ xây nhưng tôi đã không có may mắn, tôi tự hỏi nếu có ai có thể giúp đỡ?

Kịch bản thực hiện nhiều thứ, nó có bit bộ lọc, hoạt ảnh, hiển thị/ẩn, ajax để nhận nội dung, v.v. Tôi rất vui nếu có ai có thể điều tra lý do tại sao nó chồng chéo và cách tôi có thể giải quyết dựa trên mã bên dưới:

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

Nguồn: jQuery Masonry Images

Answer 2

Tôi đã gặp phải cùng một vấn đề và tôi đã phát triển 2 phương pháp để chống lại nó. Trước tiên, hãy tải lại vùng chứa sau khi bạn đã thêm hình ảnh onclick.

1. container.masonry('reload'); 

Thứ hai, và có lẽ quan trọng hơn, tự động điều chỉnh chiều cao của div xung quanh để phù hợp với chiều cao của hình ảnh:

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

Vì vậy, gạch của tôi đang tìm kiếm như thế này:

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

Chỉnh sửa: Trong mã của bạn, bạn có cùng một vấn đề, không có chiều cao trong kiểu.

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

Và có vẻ như với tôi bạn cũng gặp vấn đề với chiều rộng. Tôi nghĩ bạn cần sử dụng chiều rộng nhỏ hơn cho cột. Một giá trị tốt sẽ là chiều rộng của hình ảnh nhỏ và một số đường viền.