我有一个网站，基本上有4个不同大小的块。它们可能包含文本、图像等。
在页面加载时，我希望这些不同大小的块适合于视区，并显示“随机”填充。我也不想让这些街区之间有空隙。
作为一个额外的复杂性，这些块将按日期排序。日期排序是“松散”的，因为我知道这些块在保持严格排序的同时不能整齐地填充空间。
灰色区域是浏览器的视区。
我该如何合理地将这些块排序到页面上？向上的积木应该按日期松散地排列，并且应该整齐地填满空间（即使我的画有点粗糙）
注**我希望它看起来是随机的。当添加新块时，它们应该从以前的块视图中看起来是“随机的”
注2**这些是从数据库中提取的。div被加载到未排序和未排序的html中。我想JavaScript可以遍历我所请求的逻辑部分，因为我希望它是响应的。
最佳答案
你可能很难找到一种方法来确保没有任何差距。。但你应该能接近。
我的建议是把你的页面分成一个网格。因为最小的块是100px乘以100px，所以网格可以由100x100px的正方形组成。您可以尝试将此信息保存在变量或数组中（可能是列中有行的多维数组）
接下来，我将按日期将所有块排序为一个数组。（理想情况下，只需存储一个ID或其他东西来引用块，以及它的宽度和高度）
然后，我开始遍历我的网格，逐个检查每个正方形。每次我碰到一个新的空正方形，我都会将它与块数组中的第一项交叉检查，并计算出该块需要跨越多少行和列。如果块是2行宽1列高，我会检查我正在查看的块旁边的网格空间是否为空。。如果是这样，您可以放置该块，并存储这两个网格空间已填充的信息，从而使迭代在离开当前点后跳过下一个点。如果没有空的相邻空间，可以开始遍历块数组，检查每个块，直到找到合适的块，或者到达末尾。如果到达终点且未选择块，则空间将保持为空，并开始检查下一个空间。
显然，这使得网格空间有可能被标记为空的，并且永远不会被填充，但是可能并不总是能够填充每个空间。
我希望这能帮助你。。很明显，这是一个基于逻辑的问题，可能会有点混乱，或者我忽略了一些东西，所以如果你有任何具体的问题，请告诉我。