假设我正在开发一个应用程序，该应用程序需要显示大量不同尺寸和宽高比的图像，例如Flickr Photostream或Google Image搜索。
是否有任何现有的算法/库有助于确定每行应该有多高以及应进入每行多少张图像，以使图像之间的差距尽可能少，同时也不会过度调整任何图像的大小它们的大小相对相似（当然不会改变宽高比）？
理想情况下，这将是一种可插入算法，以输入图像尺寸列表，目标/平均行高，屏幕宽度和返回"行分配"列表，并说明哪些图像进入了哪个行，以及大小的大小，以及排高是什么。
此Flickr页面是我想实现的好例子：
http://www.flickr.com/explore
可能已经有足够的javascript脚本在模仿flickr布局周围。但这并不难滚动。
该算法类似于文字包裹的长行。查看您链接的flickr页面：一排中的图像都具有相同的高度。行高度略有不同，使外观不均匀，但也确保行延伸到整个屏幕上。
说您的父元素具有固定的宽度，但是适应图像布局的灵活高度。然后，您可以轻松布置图像列表：
-
保留行列表；每行都是图像列表。在开始时，thie行列表为空。
-
选择行的名义高度。这将是图像的最小高度。确定每个图像的实际高度和宽度并计算名义宽度：
w_nom = w_orig * h_nom / h_orig -
对于列表中的每个图像，找到一个可以容纳图像的行，即列表中图像的宽度加上天沟宽度，加上图像的宽度必须小于父元素的宽度。如果没有这样的行（或行列表为空），请启动一个新行并放置图像。
-
现在每个图像都有其行。对于每一行，为所有图像选择一个缩放因子，以便所有图像的宽度加上A（恒定，即未量化的）天沟是父的宽度。缩放每个图像的宽度和高度。
-
现在进行布局：将图像从上部到底部放在父元素上。调整父母的身高。
这只是初稿。更雄心勃勃的布局可以计算每行的"坏"，并更聪明地分发图像。另外，如果最后一行只有一个小图像，那会被不合理地炸毁，但是如果您有很多图像，则用户必须在看到这一点之前滚动很多。我也不知道如果必须在调整父元素时即时完成操作，这也不知道。
。我在这里对JavaScript进行了一个小型模型，但这只是一个概念证明 - 例如，它在IE中不起作用。该代码在页面源中，并且不必要地复杂，因为使用JavaScript样式摆弄是如此W rangy。算法本身很简单。
这是一个以后的答案，但是我写了这样的东西（带有演示）：https://github.com/mendrik/diorama
it
- 保留宽高比
- 试图保持尺寸均匀
- 试图减少裁剪
如果有足够的图像来找到解决方案，它最有效。如果您有无尽的图像流，则可以根据我的代码来占用10张图像并组装矩形。要点发生在布局"搜索"中。它需要4个参数，画布宽度/高度，图像宽高比（宽度/高）和上限以找到毫秒的解决方案。
希望它有帮助！