Question

任何人都可以帮我一个简单的网格制作算法，具有以下要求：

我有可变宽度但高度相同的矩形框
我想形成一个包含n个方框的2行网格
盒子在水平和垂直方向上彼此间隔10 px

谢谢：）

编辑：哇...在看完第一个回复后......我想我会尝试对我的帖子做更具体的了解。

我不想要整个代码......我只需要2-3行算法就可以了。

我试过的是：

boxList是一个包含所有框的数组......

for (var i:int = 0; i < boxList.length; i++)
{
    var b:Box = new Box(boxList[i]);
    this.addChild(b);

    b.y = 5 + (i % 2) * (b.height + 10);
    b.x = 10 + int(i / 2) * (b.width + 5);
}

但是只有当盒子的宽度相同时才能使用这个...在我的情况下，宽度是不同的......所以怎么做????

Answer 1

你知道舞台的宽度，以及每个盒子的宽度。

简单地有一个变量跟踪当前的水平限制。

即一些伪代码：

lastX=0
for(box in boxes)
    if(lastX + box[i].width > width)
        lastX = box[i].width
        add box to next row, with x = 0
    else
        add box at lastX
        lastX += box[i].width

Answer 2

这可能取决于您希望如何完成此操作的其他一些细节。例如，您是否希望两行尽可能接近相同的宽度？你想在每一行上有相同数量的盒子吗？当有一个奇数时，你可能想要在其中一行上加一个额外的盒子吗？等

按照您的代码，看起来您正试图在每一行上获得偶数个框。重要的是，如果你从左到右平铺，将始终采取你刚放在那一行的最后一个框，将它的x属性和宽度属性加在一起（给你右边的位置），然后只是加10。

所以使用原始代码，也许这样的东西会起作用：

var bLast1:Box; // added
var bLast2:Box; // added

for (var i:int = 0; i < boxList.length; i++)
{
    var b:Box = new Box(boxList[i]);
    this.addChild(b);

    b.y = 5 + (i % 2) * (b.height + 10);
    if (i % 2 == 0) // is this the first row?
    {
        b.x = bLast1 ? bLast1.x + bLast1.width + 10 : 10;
        bLast1 = b;
    }
    else
    {
        b.x = bLast2 ? bLast2.x + bLast2.width + 10 : 10;
        bLast2 = b;
    }
}

同样，您可能需要做出更多关于您希望如何完成平铺的决定。

想要一个简单的as3网格布局算法

2 个答案: