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

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

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

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

使用absolutes（到目前为止唯一可行的解决方案，但我希望不必这样做）-问题是我希望它能像bootstrap那样动态调整大小和折叠，这将使它变成一个复杂的解决方案，我认为可能有一个简单的解决方案

使用引导网格问题是，在某些情况下，可能没有定义的列或行。例如，请参见Image1，这是一个问题。（如果有人可以在bootstrap中定义Image1，我可能会从那里开始）
图1：

使用浮动-创建死区。在下面的例子中。第二个小红方块应该落在第一个下方，蓝色矩形的左侧，但在本例中，它落在蓝色矩形的右侧。

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

欢迎并感谢您的任何评论、想法、问题和对话

---

谢谢你

我不知道如何使用引导实现它，但这里有一个启发式方法，它非常有效（当然，与任何启发式方法一样，你可以找到具有奇怪结果的边缘案例）

//对第三个形状进行特殊处理，以避免某些边缘情况
函数s3（i，j，r，n）{
如果（j==0 | | j==3）返回true；
如果（r[i+1][j-1]！=0）返回true；
如果（n==3&&r[i][j+1]==0&&r[i+1][j+1]==0）返回true；
返回false；
}
//如果可以在此位置绘制形状，则返回true
函数canFit（s，i，j，r，f，n）{
开关{
情况1：返回r[i][j]==0；
案例2：返回j=r.length）r[i]=[0,0,0,0]；
如果（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=0&&！h[k][2]；k--）
文件.书写（''+h[k][1]+''）；
h=[]；
}
做{
i++；
如果（i+1>=r.length）r[i+1]=[0,0,0,0]；
对于（j＝0；JIT可能是值得看的或看起来很棒的）！非常感谢彻底的答案和完整的代码。我正处于一种方法的中间，但很可能会使用您的方法，因为它看起来更普遍。谢谢您。