我正在做一个电子商店，商品像往常一样在网格中显示为“瓷砖”。我只想使用各种大小的图块并确保（通过 jQuery）没有可用空间。
在基本情况下，我有一个 960 像素的包装器，并且想要使用 240x180 像素（.grid_4 类）图块和 480x360 像素（.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 个位置。有什么干净的方法可以确保这一点吗？
非常感谢您的任何提示。随意重用代码，我认为它很有用。
约瑟夫