假设我正在开发一个需要显示大量不同大小和纵横比的图像的应用程序，例如 Flickr photostream 或 Google Image search。
是否有任何现有的算法/库可以帮助确定每行应该多高以及每行应该有多少图像，以便图像之间的间隙尽可能小，同时也不会过度调整任何图像的大小，保持它们都具有相对相似的大小（当然不会改变纵横比）？
理想情况下，这将是一个可插入算法，接收图像大小、目标/平均行高、屏幕宽度列表作为输入，并返回“行分配”列表，说明哪些图像进入哪一行，大小是多少，以及行高是多少。
这个 Flickr 页面是我想要实现的一个很好的例子：
【问题讨论】：
标签： image algorithm layout alignment
可能已经有足够多的模仿 Flickr 布局的 Javascript 脚本了。但自己动手并不难。
该算法类似于自动换行长行。查看您链接的 Flickr 页面：一行中的图像都具有相同的高度。行的高度略有不同，这会产生不均匀的外观，但也确保行延伸到整个屏幕。
假设你的父元素有一个固定的宽度，但有一个灵活的高度来适应图像布局。然后，您可以轻松地布置图像列表：
保留行列表；每行是一个图像列表。一开始，行列表是空的。
为行选择一个标称高度。这将是图像的最小高度。确定每张图片的实际高度和宽度，并计算出标称宽度：
w_nom = w_orig * h_nom / h_orig
对于列表中的每个图像，找到可以容纳该图像的行，即列表中图像的宽度加上间距宽度加上图像的宽度必须小于父元素的宽度。如果没有这样的行（或者行列表为空），则开始一个新行并放置图像。
现在每个图像都有自己的行。对于每一行，为所有图像选择一个缩放因子，这样所有图像的宽度加上一个（常量，即未缩放）gutter 就是父级的宽度。缩放每个图像的宽度和高度。
现在进行布局：将图像从上到下放置在父元素上。调整父母的身高。
这只是初稿。更雄心勃勃的布局可以计算每行的“坏点”并更智能地分配图像。此外，如果最后一行只有一个小图像，那会被不合理地放大，但如果你有很多图像，用户必须滚动很多才能看到它。如果必须在调整父元素大小时动态完成，我也不知道它的效果如何。
我在 Javascript here 中做了一个小模型，但这只是一个概念证明 - 例如，它在 IE 中不起作用。代码在页面源代码中，并且不必要地复杂，因为摆弄 javascript 样式是如此冗长。算法本身相当简单。
【讨论】：
这是一个相当晚的答案，但我写了这样的东西（带演示）： https://github.com/mendrik/diorama
它
如果有足够的图像来找到解决方案，效果最好。如果您有无穷无尽的图像流，您可以使用 10 个图像块并根据我的代码组装矩形。要点发生在 layout.ts 'searchSolution' 中。它需要 4 个参数，画布宽度/高度、图像纵横比数组（宽度/高度）和以毫秒为单位找到解决方案的上限。
希望对你有帮助！
【讨论】：