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

Question

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

当我的动画扩展 <li>为了显示内容，有跳跃，有时由于 <li> 的 float ，有些地方仍然是空的。元素，它有道理而且是正确的，但我只是想知道我是否能以某种方式告诉 <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' )

调整大小后重新计算