将图像均匀分布到图库中的列

Question

简要说明

我目前正在构建一个包含三列的图库，每列包含所有宽度相同但高度不同的图像。

列的图像是从目录中收集的，并使用PHP glob()函数放入数组中。这很容易......

图库的样子：

问题

当这些图像被动态加载并放入列中时，列的高度可能会大不相同。

例如，如果在第1列放置了两张肖像照片，并且在第2列放置了两张风景照片，那么列将非常不均匀，如下所示：

列极不可能在高度上匹配，但我希望它们与给定的图像尽可能接近，因此希望形成一种算法，该算法将查看检索到的图像并将它们放入要返回三列的列，它们的高度尽可能接近。

因此，例如，脚本会通过重新排序图像并将它们放置如下来纠正上述问题：

如果我有正确的算法，我有能力写这个，我只是想不出这样做的最佳步骤。有人可以建议任何步骤吗？

可能的解决方案

我想到的一种方法（我认为会有更好的方法，因为我认为这是有缺陷的）：

1. 将所有合并图像的高度相加，然后除以列数（3）。这将为我们提供瞄准的高度
2. 将图像分发到列数组，当它超出列的高度时，溢出到下一列。
3. 将任何左侧图像放入第一列，然后放入第二列等......

提前致谢

Answer 1

我建议以下内容：

1. 将图像从最高到最短排列（假设您的宽度不变）
2. 将图像添加到第一列数组
3. 将图像添加到下一列数组，直到总高度等于或大于前一列数组
4. 重复步骤2＆amp; 3直到使用所有图像（你甚至可以按升序和降序交替填充列以帮助解决问题）
5. 在将图像添加到列
之前，随机播放图像数组以使网格线显得随机
6. 调整较短列的图像上的垂直边距，以匹配最高列的总高度（垂直对齐，排序）

希望这有帮助！

Answer 2

你可以试试这样的事情。创建数组：

$totalHeight = array(
 1 => 0, //Column 1
 2 => 0, //Column 2
 3 => 0 //Column 3
);

将图像添加到具有最小 $ totalHeigth 和增加该列的高度的列中，并添加图像高度。

因此，如果在某个循环中你有这样的数组：

$totalHeight = array(
 1 => 2500, //Column 1
 2 => 1950, //Column 2
 3 => 2450 //Column 3
);

您将知道需要在第2列添加图片。