2

简要说明

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

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

画廊的外观示例：

画廊的基本设计

问题

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

例如，如果将两张肖像照片放在第 1 列中，而将两张风景照片放在第 2 列中，那么这些列将非常不均匀，如下所示：

这个设计的问题

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

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

图像排序结果

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

可能的解决方案

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

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

提前致谢

4

2 回答 2

3

我建议以下内容：

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

希望这可以帮助！

于 2012-12-12T13:12:24.670 回答
1

你可以试试这样的东西。创建数组：

$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 列中添加图像。

于 2012-12-12T13:30:08.267 回答