我一直在想这个复杂的问题，我确信有一个简单的答案或我可以找到解决方案的其他途径。
我想要完成的是一个随机的图像网格。我有一组图像，我想将它们排列在齐平的网格中。我的意思是我希望网格中没有任何间隙。以下是一些示例图片:
主要规范:
- 容器/单元格的比例必须使图像适合且不会倾斜
- 网格必须齐平。它不能有任何间隙，包括最后一行。
我遇到的问题是我无法提出或用语言表达可以创建我试图完成的表 maxtrix 的公式。 Masonary 是我正在寻找的 99.9%，除了网格没有考虑图像大小，也没有结束齐平。所以这 1% 就是我不考虑使用它的原因。
我不是在寻找特定的 javascript，因为这与数学相关，所以我计划在 PHP 中创建布局，然后在 javascript 中增强功能。
如有任何帮助或指点，我们将不胜感激。
最佳答案
您的示例图片排列成行。此外，您没有写任何关于固定总大小的内容，因此我假设可以随意选择整个布局的纵横比。在这种情况下，您可以按照以下方式尝试:
- 将所有图像排成单行，方法是固定高度并选择宽度以保持纵横比。
- 将该单行拆分为多行。在这里您可以使用多种启发式方法，根据您的喜好调整最终结果。但是任何解决方案都会满足您所述的要求。
- 缩放每一行，使它们的宽度都相同，然后堆叠它们。
显然这只是一个粗略的轮廓。真正困难的部分是如何将图像分布到不同的行中。一个目标可能是合并具有相似纵横比的图像，以使最终图像具有相似的尺寸。您可以为每个比率计算导致所需图像区域的首选图像高度，然后组合具有相似高度要求的图像，直到缩放到共同高度所产生的宽度与您希望的最终行宽度相匹配。但其他方面也会发挥作用，例如制作宽度相似的行，诸如此类。
您可能会在其他答案和评论中找到有关目标的建议，并不断尝试直到找到您喜欢的目标。
关于php - 砖石般的图片网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14471480/