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

Question

简要说明

我目前正在构建一个包含三列的画廊，每列包含所有宽度相同但高度可以变化的图像。

列的图像从一个目录中收集并使用 PHP glob() 函数放入一个数组中。这是最简单的部分...

画廊外观示例：

问题

由于这些图像是动态加载并放入列中的，因此列的高度可能会有很大差异。

例如，如果将两张纵向照片放在第 1 列，将两张风景照片放在第 2 列，则这些列会非常不均匀，如下所示：

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

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

如果我有正确的算法，我可以写这个，我只是想不出最好的步骤来做到这一点。任何人都可以建议任何步骤吗？

可能的解决方案

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

1. 将所有图像的高度相加，然后除以列数 (3)。这将为我们提供目标高度
2. 将图像分配到列数组中，当超过列的高度时，溢出到下一列。
3. 将任何剩余的图像放入第一列，然后放入第二列等...

提前致谢

Answer 1

我建议以下内容：

1. 将您的图片从最高到最低排列成一个数组（假设您的宽度不变）
2. 将图像添加到第一列数组
3. 将图像添加到下一列数组，直到总高度等于或大于前一列数组
4. 重复第 2 步和第 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 列中添加图像。