Javascript HTML块布局的逻辑

我有一个网站，基本上有4个不同大小的块。它们可能包含文本、图像等

在页面加载时，我希望这些不同大小的块适合视口，并显示为“随机”填充。我也不想在这些街区之间留下空间

更为复杂的是，这些区块将按日期排序。日期排序将是“松散”的，因为我知道这些块不能在保持严格排序的同时整齐地填充空间

灰色区域是浏览器的视口

我将如何逻辑地将这些块排序到页面上？朝向顶部的区块应按日期进行松散排序，并应整齐地填充空间（即使我的图纸有点粗糙）

注意**我确实希望它看起来是随机的。添加新块时，它们应该从上一个块视图中看起来“随机化”

---

注2**这些是从数据库中提取的。div被加载到html中，不进行排序和大小调整。我想JavaScript可以迭代我所要求的逻辑部分，因为我希望它能够响应

您可能很难找到一种方法来确保根本不存在任何缺口。。但你应该能够接近

我的建议是把你的页面分成一个网格。因为最小的块是100px乘以100px，所以网格可以由100x100 px的正方形组成。您可以尝试将这些信息保存在变量或数组中（可能是一个多维数组，行在列中）

接下来，我将按日期将所有块排序为一个数组。（理想情况下，只需存储一个ID或引用块的内容，以及块的宽度和高度）

然后，我开始迭代我的网格，逐个检查每个正方形。每次我点击一个新的空方块，我都会将它与块数组中的第一项进行交叉检查，并计算出该块需要跨越多少行和列。如果块是2行宽1列高，我会检查我正在查看的块附近的网格空间是否为空。。如果是这样，您可以放置该块，并存储这两个网格空间已填充的信息，从而使迭代在离开当前网格空间后跳过下一个网格点。如果没有空的相邻空间，可以开始遍历块数组，检查每个块，直到找到适合的块，或者到达末尾。如果到达终点且未选择任何块，则该空间将保持为空，并开始检查下一个空间

显然，这使得网格空间可能被标记为空，并且永远不会被填充，但可能并不总是能够填充每个空间

---

我希望这对你有帮助。。显然，由于这是一个基于逻辑的问题，整理起来可能会有点混乱，或者可能有我忽略的东西，所以如果您有任何具体问题，请告诉我。

是在输出之前对块进行排序，还是动态加载所有内容，然后在DOM中排序？它们在前面排序，并静态地放置在HTML中。它们是通过PHP动态生成的，每个块都有一个编号唯一的ID。而且每个块都有一个静态大小，只是没有偏移量。这就是我认为合乎逻辑的部分。这实际上比你知道的要有用得多。这个逻辑实际上很有道理，非常适合我的需要。您建议的日期排序实际上是基于非常松散的基础，并且工作得很好。非常感谢。