标题几乎说了一切,我确实调查了砌体的图像插件,但我没有运气,我想知道是否有人可以提供帮助?
脚本做很多事情,它有过滤器位,动画,显示/隐藏,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"),{offset:80} ); }); }); }); item.data('loaded',true); }); } else { item.removeClass("loading"); $("#container").masonry('reloadItems',function () { $("div.fader",function () { $("div.info",function () { $(document).scrollTo( $(".info"),{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"),{offset:-50} ); }); $("a.showMe",item).click(function (e) { e.preventDefault(); if (item.hasClass("inactive")) return; open(item); }); }); })(jQuery); </script>
解决方法
jQuery(function(){ var $container = $('#container'); $container.imagesLoaded( function () { itemSelector: '.Box',animate: true }); });