Javascript 砖石图像重叠问题

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

脚本做了很多事情，它有过滤器位、动画、显示/隐藏、获取内容的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>

jQuery（函数（）{
jQuery（“#容器”）({
itemSelector:“.box”，
动画：真实
});
});
（函数（$）{
//获取ID以“filter-”开头的所有菜单项，并在其上循环
$（“.menu li[id |=过滤器]”）。每个（函数（）{
//获取ID添加从中提取页面类名（从中删除“filter-”）
变量类型=$（this.attr（“id”）.replace（“过滤器-”，“”）；
//使用该类名获取“webbies”列表中的项
var items=$（“#container div[class~=”+type+“]）；
//如果没有，什么都不要做
如果（items.length==0）返回；
//获取列表中其他项目的列表
var others=$（“#container>div:not（[class~=”+type+“]））；
//将单击事件添加到菜单项
$（“a”，此）。单击（函数（e）{
//停止链接
e、 预防默认值（）；
//结清未结项目
如果（打开项）{
关闭（打开项）；
}
removeClass（“非活动”）.animate（{opacity:1}）；
其他.addClass（“非活动”）.animate（{opacity:0.2}）；
});
});
$（“.reset filter a”）。单击（函数（e）{
e、 预防默认值（）；
如果（打开项）关闭（打开项）；
$（“div.box.inactive”）.removeClass（“inactive”）.animate（{opacity:1}）；
});
var开放项；
//打开一个项目
var open=功能（项目）{
//结清未结项目
如果（打开项）关闭（打开项）；
项目。添加类别（“加载”）；
$（“img”，item）.first（）.hide（）；
项目.宽度（340）；
项目.高度（600）；
如果（！item.data（'loaded'））{
$（“div.fader”，item）.load（$（“a”，item）.first（）.attr（“href”）+“#content”，函数（）{
stButtons.locateElements（）；
stButtons.makeButtons（）；
stWidget.init（）；
$（“#容器”）.mashise（'reloadItems'，function（）{
$（“div.fader”，item）。动画（{opacity:1}，函数（）{
项目。移除类（“加载”）；
$（“”）。附加到（此）。单击（函数（e）{
e、 预防默认值（）；
关闭（项目）；
$（文档）。滚动到（$（“#导航块”），600，{offset:-50}）；
});
$（“div.info”，item）.fadeIn（“slow”，function（）{
$（document.scrollTo（$（“.info”），600，{offset:80}）；
});
});
});
项目数据（“已加载”，为真）；
});
}否则{
项目。移除类（“加载”）；
$（“#容器”）.mashise（'reloadItems'，function（）{
$（“div.fader”，item）。动画（{opacity:1}，函数（）{
$（“div.info”，item）.fadeIn（“slow”，function（）{
$（document.scrollTo（$（“.info”），600，{offset:80}）；
});
});
});
}
//设置未清项
openItem=项目；
};
//关闭一个项目
var close=功能（项目）{
$（“div.fader”，item）.animate（{opacity:0}）；
$（“div.info”，item）.hide（）；
项目.动画（{宽度：150，高度：100}，函数（）{
$（“img”，item）.first（）.fadeIn（“慢”）；
$（“#容器”）.mashine（‘重新加载的项目’）；
});
//重置未清项
openItem=null；
};
$（“#container div.box”）。每个（函数（）{
var项目=$（此项）；
项目数据（“已加载”，错误）；
$（“div.fader”，item）.css（“不透明度”，0）；
$（“a.close”，项目）。单击（函数（e）{
e、 预防默认值（）；
关闭（项目）；
$（文档）。滚动到（$（“#导航块”），600，{offset:-50}）；
});
$（“a.showMe”，项目）。单击（函数（e）{
e、 预防默认值（）；
if（项目类别（“非活动”）返回；
未结（项目）；
});
}); 
})（jQuery）；

我也遇到过同样的问题，我开发了两种方法来解决它。首先，在附加onclick图像后重新加载容器

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

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

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

---

来源：

mm这很有意义，很有希望，谢谢。请尝试并回复。只有在您已经定义了图像尺寸的情况下，这才是有效的解决方案。如果是这样，长方体模型将处理任何重叠。明确设置高度/宽度是多余的。可能与此有关，因为我前面的观点没有必要诚然，函数不能这样使用。