Question

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

在基本情况下，我有一个960px的包装器，想要使用240x180px（类.grid_4）磁贴和480x360px（类.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;

        }

    });

从评论中可以看出它是如何工作的 - 通常总是通过在需要时移回一个位置来确保大块位于奇数位置（前面的小块的数量是偶数）。另外一个div需要将大块左边的小块包裹在另一个div中，这样它们就会出现在列而不是行中。

现在最后问题：

如何推广这个功能，以便我可以使用更多的瓷砖尺寸，如720x360（3x2），480x540（2x3）等？
有没有办法简化功能？
在检查实际位置时，我需要确保大瓷砖计为小瓷砖的倍数。因为在位置12上的tile（第3行中的最后一个tile）上使用index（）现在将返回7（位置8），因为位置5和9上的tile在一列中包裹在一起，而大tile也只是一个div，但是跨越2x2的位置。有什么干净的方法可以确保这个吗？

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

约瑟夫

Answer 1

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

你可以找到它here

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

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

2 个答案: