页面上的多个图像的智能对齐/布局 [英] Smart alignment / layout of multiple images on page
问题描述
假设我正在开发一个需要显示大量不同尺寸和纵横比，像Flickr照片或谷歌图片搜索的图像的应用程序。
Assume I'm developing an application that needs to display a large number of images of different sizes and aspect ratios, like Flickr photostream or Google Image search.
是否有任何现有算法/库，帮助决定每行应该有多高是多少图片应该进入各行，以便有图像，同时尽可能也不过分调整任何图像之间的小缝隙，保持他们都在比较相似的大小（当然不改变纵横比）？
Are there any existing algorithms / libraries that help decide how tall each row should be and how many images should go into each row so that there are as little gaps between images as possible while also not excessively resizing any of the images, keeping them all at relatively similar sizes (and certainly not changing aspect ratios)?
在理想情况下，这将是一个可插拔的算法来接收输入的图像尺寸，目标/平均行高，屏幕宽度的列表，并返回行任务列表，说明哪些图片进入这行，什么大小和行高是什么。
Ideally, it would be a pluggable algorithm receiving as input a list of image sizes, target/average row height, screen width, and returning a list of "row assignments", stating which images go into which row, with what size, and what the row heights are.
这Flickr的页面是什么，我想达到一个很好的例子：
This Flickr page is a good example of what I want to achieve:
推荐答案
有可能已经足够的Javascript脚本围绕模拟天生Flickr的布局。但不难推出自己的。
There are probably already enough Javascript scripts around that mimick the Flickr layout. But it isn't hard to roll your own.
该算法类似于字包皮过长的线路。看的Flickr页面，您链接：在一行里的影像都具有相同的高度。行具有略微不同的高度，这给出了一个非均匀的外观，而且还确保了行延伸过整个屏幕。
The algorithm is similar to word-wrapping long lines. Look at the Flickr page you linked: The images in one row all have the same height. The rows have slightly different heights, which gives a non-uniform look, but also ensures that the row extends over the whole screen.
再说说你的父元素有一个固定的宽度，但高度灵活的可适应的图像布局。然后，您可以制定出图像的列表中轻松：
Say that your parent element has a fixed width, but a flexible height that adapts to the image layout. You can then lay out a list of images easily:
-
请行的列表;每行是图像的列表。在开始的时候，thie排列表是空的。
Keep a list of rows; each row is a list of images. At the beginning, thie row list is empty.
选择了一个正常高度的行。这将是图像的最小高度。确定每个图像的实际高度和宽度，并计算出标称宽度：
Chose a nominal height for the rows. This will be the minimal height of the images. Determine the actual height and width of each image and calculate the nominal width:
w_nom = w_orig * h_nom / h_orig
有关列表中的每个图像，发现一排能容纳的图像，即图像的列表中的宽度加上一个沟槽宽度加上所述图像的宽度必须比父元素的宽度小。如果没有这样的行（或者如果行的列表为空），启动一个新的行，并把该图像
For each image in the list, find a row that can accommodate the image, i.e. the width of the images in the list plus a gutter width plus the image's width must be smaller than the parent element's width. If there is no such row (or if the list of rows is empty), start a new row and place the image.
现在每张图片都有其行。对于每一行，选择了所有图像，使得所有图像加上一个（恒定的，即无标度）排水沟宽度父宽度的比例因子。缩放每个图像的宽度和高度。
Now every image has its row. For each row, chose a scaling factor for all images such that the width of all images plus a (constant, i.e. unscaled) gutter is the width of the parent. Scale each image's width and height.
现在做的布局：将图像从顶部到底部的父元素。调整父母的身高。
Now do the layout: Place the images from top to bottom on your parent element. Adjust the parent's height.
这只是一个初稿。一个更加雄心勃勃的布局可以计算出一个坏的每一行，更智能地分发的图像。此外，如果最后一排只有一个小图像，这被炸掉不合理的，但如果你有大量的图片，用户可以看到之前滚动了。我也不知道该怎么好这个工作，如果它要在当父元素大小调整实时进行。
This is only a first draft. A more ambitious layout could calculate a "badness" for each row and distribute the images more intelligently. Also, if the last row has only one small image, that gets blown up unreasonably, but if you have a lot of images, the user has to scroll much before seeing that. I also don't know how well this works if it has to be done on the fly when the parent element is resized.
我做了一个小的实体模型在这里的Javascript ，但它的概念只是一个证明 - 它不工作在IE，例如。在code是在页面的源代码，是不必要的复杂，因为使用JavaScript风格摆弄这么罗嗦。该算法本身是相当简单的。
I've made a small mock-up in Javascript here, but it's just a proof of concept - it doesn't work in IE, for example. The code is in the page source and is needlessly complicated because fiddling with the javascript styles is so wordy. The algorithm itself is rather straightforward.
这篇关于页面上的多个图像的智能对齐/布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
