您能简化并概括这个有用的 jQuery 函数吗？

Question

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

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

替代文本 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;

        }

    }); 

从评论中应该可以明显看出它是如何工作的 -一般来说，如果需要的话，总是通过向后移动一个位置来确保大块位于奇数位置（前面的小块的数量是偶数）。此外，大块左侧的小块需要包裹在另一个 div 中，以便它们出现在列而不是行中。

现在最后的问题是：

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

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

约瑟夫

Answer 1

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

您可以在此处找到它

Answer 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())
}
})