逻辑到HTML块放置

Question

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

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

作为一个额外的复杂性，这些块将按其日期排序。日期排序将是“松散的”，因为我知道这些块无法整齐地填充空间，同时保留严格的排序。

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

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

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

Note2 **这些是从数据库中提取的。 div被加载到html unsorted和unsized中。我认为JavaScript可以遍历我要求的逻辑部分，因为我希望它能够响应。

Answer 1

您可能很难找到确保根本没有任何间隙的方法......但您应该能够接近。

我对此的建议是将您的页面划分为网格。因为您的最小块是100px乘100px，您的网格可以包含100x100像素的正方形。您可以尝试将此信息保存在变量或数组中（可能是一个包含列内行的多维数据）

接下来，我会按日期将所有块排序到一个数组中。 （理想情况下，只需存储ID或其他东西来引用块，以及它的宽度和高度）

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

显然，这样就可以将网格空间标记为空，并且永远不会填充，但可能无法始终填充每个空间。

我希望这可以帮助你..显然，因为这是一个基于逻辑的问题，它可能有点令人困惑，或者可能有一些我忽略的东西，所以如果你有任何具体的问题，请告诉我。