你能简化和概括这个有用的 jQuery 函数吗？答案

【问题标题】：Can you simplify and generalize this useful jQuery function, please?你能简化和概括这个有用的 jQuery 函数吗？
【发布时间】：2010-04-15 07:20:58
【问题描述】：

我正在做一个电子商店，商品像往常一样在网格中显示为“图块”。我只想使用各种大小的图块并确保（通过 jQuery）没有可用空间。

在基本情况下，我有一个 960 像素的包装器，并且想要使用 240x180 像素（.grid_4 类）图块和 480x360 像素（.grid_8 类）图块。查看图片（想象那里没有边距/填充）：

alt text http://img580.imageshack.us/img580/2828/screenshot2010041508h52.png

没有 jQuery 的问题：

当 CMS 提供第 6 个大图块时，第 5 个图块下方会有一个空闲空间
当 CMS 提供第 7 个大图块时，第 5 个和第 6 个下方会有一个空闲空间
当 CMS 提供第 8 个大图块时，它将转移到下一行，使第 8 个位置空闲

到目前为止，我的解决方案如下所示：

$(".grid_8").each(function(){
        //console.log("BIG on position "+($(this).index()+1)+" which is "+(($(this).index()+1)%2?"ODD":"EVEN"));

        switch (($(this).index()+1)%4) {

            case 1:
                // nothing needed
                //console.log("case 1");
                break;

            case 2:
                //need to shift one position and wrap into 240px div
                //console.log("case 2");
                $(this).insertAfter($(this).next()); //swaps this with next
                $(this).prevAll(":nth(0), :nth(1)").wrapAll("<div class=\"grid_4\" />");

                break;

            case 3:
                //need to shift two positions and wrap into 480px div
                //console.log("case 3");
                $(this).prevAll(":nth(0), :nth(1)").wrapAll("<div class=\"grid_4\" />"); //wraps previous two - forcing them into column 
                $(this).nextAll(":nth(0), :nth(1)").wrapAll("<div class=\"grid_4\" />"); //wraps next two - forcing them into column
                $(this).insertAfter($(this).next()); //moves behind the second column
                break;

            case 0:
                //need to shift one position
                //console.log("case 4");
                $(this).insertAfter($(this).next());
                //console.log("shifted to next line");
                break;

        }

    });

从 cmets 应该很明显它是如何工作的 - 通常总是通过在需要时向后移动一个位置来确保大瓷砖位于奇数位置（前面的小瓷砖计数是偶数）。此外，大瓷砖左侧的小瓷砖需要包裹在另一个 div 中，以便它们出现在列中而不是行中。

现在终于有问题了：

如何概括该函数，以便我可以使用更多的图块尺寸，例如 720x360 (3x2)、480x540 (2x3) 等？
有没有办法简化函数？
在检查实际位置时，我需要确保大图块算作小图块的倍数。因为在位置 12 的图块（第三行的最后一个图块）上使用 index() 现在将返回 7（位置 8），因为位置 5 和 9 上的图块被包裹在一列中，大图块也只是一个 div，但跨越 2x2 个位置。有什么干净的方法可以确保这一点？

非常感谢您的任何提示。随意重用代码，我认为它会很有用。

约瑟夫

【问题讨论】：

标签： javascript jquery refactoring grid shopping-cart

【解决方案1】：

听起来你需要使用名为 masonry 的 jQuery 插件。

你可以找到它here

【讨论】：

看起来棒极了！我现在要找到它的用途，哈哈。
哇！一直在寻找类似的东西无济于事。显然需要提高我的谷歌搜索技能。非常感谢！
了解上述问题的答案可能仍然有用

【解决方案2】：

这对您来说是否足够简化？

$(".grid_8")
.each(function () {
switch (($(this)
    .index() + 1) % 4) {
    case 1:
        break;
    case 2:
        $(this)
            .insertAfter($(this)
            .next()), $(this)
            .prevAll(":nth(0), :nth(1)")
            .wrapAll('<div class="grid_4" />');
        break;
    case 3:
        $(this)
            .prevAll(":nth(0), :nth(1)")
            .wrapAll('<div class="grid_4" />'), $(this)
            .nextAll(":nth(0), :nth(1)")
            .wrapAll('<div class="grid_4" />'), $(this)
            .insertAfter($(this)
            .next());
        break;
    case 0:
        $(this)
            .insertAfter($(this)
            .next())
}
})

【讨论】：