类似砌体的图片网格

Question

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

我想要完成的是一个随机的图像网格。我有一系列图像，我想在齐平网格中排队。我的意思是我希望网格没有任何空白。以下是一些示例图片：

主要规格：

• 容器/单元格必须具有图像可以适应的比例而不会倾斜
• 网格必须齐平。它不能有任何空白，包括最后一行。

我遇到的问题是我无法提出或者说出一个可以创建我想要完成的表maxtrix的公式。 Masonary是我想要的99.9％，除了网格没有考虑图像大小也没有结束冲洗。因此1％是我不考虑使用它的原因。

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

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

Answer 1

您的示例图片按行排列。此外，您没有关于固定总大小的任何内容，因此我假设可以随意选择整个布局的宽高比。在这种情况下，您可以尝试以下几点：

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

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

您可能会在其他答案和评论中找到有关目标的建议，并在找到您喜欢的内容之前随意玩具。

Answer 2

Justified-Gallery看起来像是一个解决方案here is the site with examples。