Question

想知道是否有人可以帮助我：

当我的动画扩展<li>以显示内容时，有跳跃，有时一些地方由于<li>元素的浮动而保持空白，这是有道理的并且它是正确的但我是只是想知道我是否能以某种方式告诉<li> s重新订购以占用所有可用空间（如果有的话）。

(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 = $(".webbies li[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 = $(".webbies li: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
            });
        });
    });
    var openItem;
    // Opens an item
    var open = function (item) {
            // Close open item
            if (openItem) close(openItem);
            $("img", item).first().hide("slow");
            item.animate({
                width: 350,
                height: 370
            });
            $("div.info", item).show("slow", function () {
                $("div.fader", item).animate({
                    opacity: 1
                });
            });
            // Set open item
            openItem = item;
        };
    // Closes an item
    var close = function (item) {
            $("div.fader", item).animate({
                opacity: 0
            }, function () {
                $("div.info", item).hide("slow");
                item.animate({
                    width: 150,
                    height: 90
                });
                $("img", item).first().show("slow");
            });
            // Reset open item
            openItem = null;
        };
    $(".webbies li").each(function () {
        var item = $(this);
        $("div.fader", item).css("opacity", 0);
        $("a.showMe", item).click(function (e) {
            e.preventDefault();
            if (item.hasClass("inactive")) return;
            open(item);
        });
    });
})(jQuery);

由于

Answer 1

我想到的第一件事是使用j Query Masonry并在使用.masonry( 'reloadItems' )调整大小后重新计算

Answer 2

解决方案是使用以前评论链接的砌体，我的最终代码是：

     jQuery(function(){
    jQuery('#container').masonry({
 itemSelector: '.box',
   columnWidth: 190,
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});
});
  });

  var openItem;

  // Opens an item
 var open = function (item) {
// Close open item
if (openItem) close(openItem);
$("img", item).first().hide("slow");
item.width(340)
item.height(360);
$("div.fader", item).animate({opacity: 1}, function () {
    $("#container").masonry('reloadItems', function () {
        $("div.info", item).show("slow");

    });

});
// Set open item
openItem = item;

   };

 // Closes an item
  var close = function (item) {
$("div.fader", item).animate({opacity: 0});
$("div.info", item).hide("slow");
item.animate({width: 150, height: 100}, function () {
    $("img", item).first().show("slow");
    $("#container").masonry('reloadItems');
});

// Reset open item
openItem = null;
     };

 $("#container div.box").each(function () {
var item = $(this);
$("div.fader", item).css("opacity", 0);
$("a.showMe", item).click(function (e) {
    e.preventDefault();
    if (item.hasClass("inactive")) return;
    open(item);
});
  }); 
})(jQuery);

jquery - 当其他li展开时排序li位置

2 个答案: