javascript - 给定形状列表动态创建的复杂 HTML 网格

Question

输入:我从一个正方形和长方形列表开始。有 4 种可能的尺寸(1x1、1x2、2x1 和 2x2)。该列表可以是任意长度和 4 种形状的任意组合。

问题:我想将所有这些形状堆叠到一个宽度为 4 且没有死 Angular 的容器中。像俄罗斯方 block ，但形状适合容器的天花板而不是地板

我想到了 3 种方法，每种方法都有自己的问题。

1. 使用绝对值(到目前为止唯一可行的解​​决方案，但我希望不必这样做)- 问题是我希望它像 Bootstrap 那样动态调整大小和折叠，这会把它变成一个我认为可能存在的复杂解决方案做一个简单的人。

2. 使用 Bootstrap 网格。 - 问题是在某些情况下可能没有定义的列或行。例如，请参阅 Image1，这是一个问题。(如果有人可以在 bootstrap 中定义 Image1，我可能可以从那里获取它)
   图一:

3. 使用 float - 创造死空间。在下面的例子中。第二个红色小方 block 应位于第一个下方并位于蓝色矩形的左侧，但在本例中它位于蓝色矩形的右侧。

规定:形状应该按照它们在列表中出现的顺序大致显示，因为那些是应该首先看到的形状。较小的形状显然需要向前移动以填补空白。基本上，我可以通过将形状分组来找到解决方案，但由于它们按优先顺序排列，我无法使用此解决方案。

欢迎和赞赏任何评论、想法、问题和对话。

谢谢

Answer 1

我不知道如何使用 bootstrap 实现它，但这里的启发式方法非常有效(当然，对于任何启发式方法，您都可以找到具有奇怪结果的边缘情况)

// special handling for 3rd shape to avoid some edge cases
function s3(i, j, r, n) {
    if (j == 0 || j == 3) return true;
    if (r[i+1][j-1]!=0) return true;
    if (n == 3 && r[i][j+1]==0 && r[i+1][j+1]==0) return true;
    return false;
}
// returns true if shape can be drawn in this position
function canFit(s, i, j, r, f, n) {
    switch (s) {
    case 1: return r[i][j]==0;
    case 2: return j<3 && r[i][j]==0 && r[i][j+1]==0;
    case 3: return r[i][j]==0 && r[i+1][j]==0 && s3(i, j, r, n);
    case 4: return j<3 && r[i][j]==0 && r[i][j+1]==0 && r[i+1][j]==0 && r[i+1][j+1]==0;
    }
    return false;
}
// determines color of the shape
function clr(s) {
    switch(s) {
    case 1: return 'a';
    case 2: return 'b';
    case 3: return 'c';
    case 4: return 'd';
    }
}
// main function to use
function drawBox(oa) {
    var a = [];
    var f = [0,0,0,0];
    for (var k=0; k<oa.length; k++) {
        f[oa[k]-1]++;
        a.push([oa[k], k]);
    }

    var r = [];

    document.write('<div class="box">');
    var idx = 0;
    var i = 0;
    var j = 0;
    var h = [];
    while (a.length > 0) {
        if (idx == a.length) break;
        if (i >= r.length) r[i] = [0, 0, 0, 0];
        if (i+1 >= r.length) r[i+1] = [0, 0, 0, 0];

        var s = a[idx][0];
        var op = a[idx][1];
        if (canFit(s, i, j, r, f, idx+1<a.length?a[idx+1][0]:-1)) {
            switch (s) {
            case 1: h.push([s, op, j==0]); f[0]--; r[i][j]=1; break;
            case 2: h.push([s, op, j==0]); f[1]--; r[i][j]=r[i][j+1]=2; break;
            case 3: h.push([s, op, j==0 || (j==1 && r[i+1][j-1]!=0)]); f[2]--; r[i][j]=r[i+1][j]=3; break;
            case 4: h.push([s, op, j==0 || (j==1 && r[i+1][j-1]!=0)]); f[3]--; r[i][j]=r[i][j+1]=r[i+1][j]=r[i+1][j+1]=4; break;
            }
            a.splice(idx, 1); idx=0;
            while (r[i][j]!=0 && j<4) j++;
        } else
            idx++;
        if (j == 4) {
            if (h.length > 0) {
                for (var k=0; k<h.length && h[k][2]; k++)
                    document.write('<div class="'+clr(h[k][0])+' l">' + h[k][1] + '</div>');
                for (var k=h.length-1; k>=0 && !h[k][2]; k--)
                    document.write('<div class="'+clr(h[k][0])+' r">' + h[k][1] + '</div>');
                h = [];
            }
            do {
                i++;
                if (i+1 >= r.length) r[i+1] = [0, 0, 0, 0];
                for (j=0; j<4; j++) if (r[i][j] == 0) break;
            } while (r[i][j] != 0);
        }
    }
    document.write('</div>');
}

// main calls with sample arrays
drawBox([3,1,2,2,3,4,1,2]);document.write('<br><br>');
drawBox([1,3,3,3,3,4,3,1]);document.write('<br><br>');
drawBox([1,1,3,3,4,3,3,1,1]);document.write('<br><br>');
drawBox([1,1,3,3,1,3,3,1,1,2,1]);document.write('<br><br>');
drawBox([1,1,3,3,1,3,4,1,1,1]);document.write('<br><br>');
drawBox([1,1,3,3,1,3,4,1,3]);document.write('<br><br>');

.box {
    display: block;
    width: 200px;
    height: 200px;
}
.a {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #ffa0ff;
    vertical-align: top;
}
.b {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: #ffffa0;
    vertical-align: top;
}
.c {
    display: inline-block;
    width: 50px;
    height: 100px;
    background-color: #a0a0ff;
    vertical-align: top;
}
.d {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: #ffa0a0;
    vertical-align: top;
}
.l {
    float: left;
}
.r {
    float: right;
}

我想对于结果错误的情况更新它是很容易的