智能对齐页面上多个图像的布局

围绕Flickr布局，可能已经有足够的Javascript脚本。但是，推出自己的产品并不难。

该算法类似于自动换行。查看您链接的Flickr页面：一行中的图像都具有相同的高度。这些行的高度略有不同，这使外观看起来不均匀，但也确保了行在整个屏幕上延伸。

假设您的父元素具有固定的宽度，但是高度灵活，可以适应图像布局。然后，您可以轻松地布置图像列表：

• 保留行列表；每行都是图像列表。一开始，该行列表为空。

• 选择行的标称高度。这将是图像的最小高度。确定每个图像的实际高度和宽度并计算名义宽度：

  w_nom = w_orig * h_nom / h_orig

• 对于列表中的每个图像，找到可以容纳该图像的行，即列表中图像的宽度加上装订线宽度加上图像的宽度必须小于父元素的宽度。如果没有这样的行（或者行列表为空），请开始新的一行并放置图像。

• 现在每个图像都有一行。对于每一行，为所有图像选择比例因子，以使所有图像的宽度加上（恒定的，即未缩放的）装订线是父图像的宽度。缩放每个图像的宽度和高度。

• 现在进行布局：将图像从上到下放在父元素上。调整父母的身高。

这只是初稿。更具雄心的布局可以为每一行计算一个“坏处”，并更智能地分发图像。同样，如果最后一行只有一个小图像，那会不合理地被炸掉，但是如果您有很多图像，则用户必须滚动很多才能看到它。我还不知道如果调整父元素的大小时必须立即执行此 *** 作，效果如何。

我在这里用Javascript做了一个小模型，但这只是概念上的证明-
例如，它在IE中不起作用。代码在页面源代码中，并且不必要地复杂，因为摆弄javascript样式是如此罗word。该算法本身非常简单。