javascript - 卡片布局实现

Question

我正在寻找卡片布局的实现：

• 给定一个固定宽度的画布，将布置任意数量的矩形，最初有一些边距。固定 Y 坐标。
• 如果矩形的数量不适合画布宽度，则每个矩形将被下一个部分覆盖。最后一个显示其整个宽度的反应角
• 想要在我添加一个新矩形时自动调整布局

如果已经存在或类似的东西，请分享。希望我不必写它。

Answer 1

像@puggsoy 一样，我想不出一个库可以做到这一点，但这里有一个简单的函数可以满足你的需要。

function updateLayout(canvasWidth:Number, rects:Array, rectWidth:Number, margin:Number):void
{
    var totalWidth:Number = rects.length * rectWidth + ((rects.length-1)*margin);
    var offset:Number = rectWidth + margin;
    if(totalWidth > canvasWidth)
    {
        offset = (canvasWidth - rectWidth) / (rects.length-1);
    }

    var currX:Number = 0;
    for each(var rect:DisplayObject in rects)
    {
        rect.x = currX;
        currX += offset;
    }
}

这假定 rects 数组中的 DisplayObjects 按其 childIndex 排序。