在给定形状列表的情况下动态创建复杂HTML网格

Question

输入：我从一个正方形和矩形列表开始。有4种可能的尺寸（1x1,1x2,2x1和2x2）。列表可以是任何长度和4种形状的任意组合。

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

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

1. 使用绝对值（目前只有可行的解决方案，但我希望不必这样做） - 问题是我希望动态调整大小并像bootstrap一样崩溃，这会把它变成一个复杂的解决方案，我认为可能是一个简单的。

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

3. 使用浮点数 - 创建死角。在下面的例子中。第二个小红色方块应低于蓝色矩形的第1个和左边，但在此示例中，它落在蓝色矩形的右侧。

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

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

谢谢

Answer 1

我不知道如何使用bootstrap来实现它，但是这里的启发式工作非常好（当然，任何启发式都可以找到具有奇怪结果的边缘情况）

＆＃13;

＆＃13;

// 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>');

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

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