javascript - HTML block 放置的逻辑

Question

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

在页面加载时，我希望这些不同大小的 block 适合视口(viewport)并“随机”填充。我也不希望这些 block 之间有空间。

作为增加的复杂性，这些 block 将按其日期排序。日期排序将是“松散的”，因为我知道这些 block 无法在保持严格排序的同时整齐地填充空间。

灰色区域是浏览器的视口(viewport)。

我将如何在逻辑上对页面上的这些 block 进行排序？顶部的 block 应该按日期松散地排序并且应该整齐地填充空间(即使我的画有点粗糙)

注意**我确实希望它随机出现。添加新 block 时，它们应该从以前的 block View 中看起来是“随机的”

注 2** 这些是从数据库中提取的。 div 被加载到 html 中，未排序且未调整大小。我在想 JavaScript 可以遍历我要问的逻辑部分，因为我希望它能够响应。

Answer 1

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

我对此的建议是将您的页面划分为网格。因为您的最小块是 100 像素 x 100 像素，所以您的网格可以由 100x100 像素的正方形组成。您可以尝试将此信息保存在变量或数组中(可能是一个多维数组，行在列中)

接下来，我将按日期将所有 block 排序到一个数组中。 (理想情况下，只需存储一个 ID 或其他内容来引用该 block ，以及它的宽度和高度)

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

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

希望对您有所帮助.. 显然，由于这是一个基于逻辑的问题，整理起来可能有点困惑，或者可能有一些我忽略的地方，所以如果您有任何具体问题，请告诉我。