Joh*_*n M 1 algorithm layout image alignment
假设我正在开发一个需要显示大量不同大小和宽高比的图像的应用程序,如Flickr photostream或Google Image搜索.
是否有任何现有的算法/库可以帮助确定每行应该有多高,每行应该有多少图像,以便图像之间的间隙尽可能小,同时也不会过度调整任何图像的大小,使它们保持全部相对相似的尺寸(当然不会改变宽高比)？
理想情况下,它是一个可插拔的算法,接收图像大小,目标/平均行高,屏幕宽度列表作为输入,并返回"行分配"列表,说明哪些图像进入哪一行,具有什么尺寸,以及什么行高是.
这个Flickr页面是我想要实现的一个很好的例子:
可能已经有足够的Javascript脚本来模仿Flickr布局.但是推出自己的并不难.
该算法类似于包装长行的字.查看您链接的Flickr页面:一行中的图像都具有相同的高度.行具有略微不同的高度,这给出了不均匀的外观,但也确保了行在整个屏幕上延伸.
假设您的父元素具有固定宽度,但具有适应图像布局的灵活高度.然后,您可以轻松地列出图像列表:
保留行列表; 每行是一个图像列表.一开始,行列表为空.
选择行的标称高度.这将是图像的最小高度.确定每个图像的实际高度和宽度并计算标称宽度:
w_nom = w_orig * h_nom / h_orig
对于列表中的每个图像,找到一个可以容纳图像的行,即列表中图像的宽度加上装订线宽度加上图像的宽度必须小于父元素的宽度.如果没有这样的行(或者行列表为空),则启动一个新行并放置图像.
现在每个图像都有它的行.对于每一行,为所有图像选择缩放因子,使得所有图像的宽度加上(恒定的,即未缩放的)沟槽是父级的宽度.缩放每个图像的宽度和高度.
现在进行布局:在父元素上从上到下放置图像.调整父母的身高.
这只是初稿.更雄心勃勃的布局可以计算每行的"不良"并更智能地分发图像.此外,如果最后一行只有一个小图像,那会被不合理地炸毁,但是如果你有很多图像,用户必须在看到之前滚动很多.如果必须在父元素调整大小时动态完成,我也不知道这有多好.
我在这里用Javascript做了一个小模型,但它只是一个概念证明 - 例如,它在IE中不起作用.代码在页面源代码中,并且不必要地复杂化,因为摆弄javascript样式是如此罗嗦.算法本身相当简单.