php - 砖石画格

Question

我一直在思考这个复杂的问题，我相信有一个简单的答案或我可以找到解决方案的其他途径。

我想要完成的是一个随机的图像网格。我有一组图像，我想将它们排列在一个齐平的网格中。我的意思是我希望网格中没有任何间隙。以下是一些示例图像：

关键规格：

• 容器/单元格必须处于图像可以不倾斜的比例
• 网格必须齐平。它不能有任何间隙，包括最后一行。

我遇到的问题是我无法提出或表达一个可以创建我想要完成的表 maxtrix 的公式。Masonary 是我正在寻找的 99.9%，除了网格没有考虑图像大小，也没有结束齐平。所以这 1% 就是我不考虑使用它的原因。

我不是在寻找特定的 javascript，因为这与数学有关，所以我计划在 PHP 中创建布局，然后在 javascript 中提供功能。

任何帮助或指示将不胜感激。

Answer 1

您的示例图像按行排列。此外，您没有写任何关于固定总大小的内容，所以我假设可以随意选择整个布局的纵横比。在这种情况下，您可以尝试以下方式：

1. 通过固定高度并选择宽度以保持纵横比，将所有图像排成一行。
2. 将该单行拆分为多行。在这里，您可以使用多种启发式方法，根据您的喜好调整最终结果。但是任何解决方案都会满足您所说的要求。
3. 以这样的方式缩放每一行，使它们都具有相同的宽度，然后将它们堆叠起来。

显然这只是一个粗略的轮廓。真正困难的部分是如何将图像分布到不同的行上。一个目标可能是组合具有相似纵横比的图像，以使最终图像具有相似的大小。您可以为每个比率计算将导致所需图像区域的首选图像高度，然后组合具有相似高度要求的图像，直到缩放到共同高度产生的宽度与您希望的最终行的宽度相匹配。但其他方面也将发挥作用，例如制作类似宽度的行，以及类似的东西。

您可能会在其他答案和评论中找到有关目标的建议，然后玩弄它们，直到找到您喜欢的。

Answer 2

Justified-Gallery看起来像是一个解决方案，这里是带有示例的站点。