Layout of a non-equal-width picture List

The search results page of each major search engine's picture channel, the result of search is more fragmentary picture, picture quality, size are uneven, and limit the total width of each line. This non-equal-width picture list is also useful in Google + and Flickr.

Recently just about 360 search image search results page has been reconstructed and revised, for this kind of picture layout also spent a lot of research, then talk about some of my processing ideas.

The non-equal width of a single picture to be arranged in a fixed width of the container, then the width of the container is the biggest limitations and obstacles, and began to miss the common wide waterfall Flow layout (no restrictions really good).

First, the basic requirements:

• 1, the width of the picture is not fixed;
• 2, the height of the picture is fixed;
• 3, the total width of each line of the picture is fixed, so the number of images can be accommodated in each row is not determined;
• 4, to ensure that the picture quality is unchanged, can not have tensile deformation caused the picture distortion of the situation appears;
• 5, the spacing between the pictures is fixed;

Arbitrary selection of a set of picture data, calculate the sum of the width of the picture, when the width is just greater than or equal to the fixed width of a row, then this is a set of the size of the original image, before processing should be the case.

In a row of pictures, with a UL list to store this line of images, Li floating. The sum of the width of a set of original images is usually greater than the width of a row, just equal is rarely seen, if the width is too large, the use of floating layout will inevitably let the last picture fall down. The basic HTML structure is the following.

01	<style type="text/css">

02	.img_list{ /*该行的固定宽度*/overflow:hidden }

03	.img_list li{ float:left; }

04

</style>

05

06	<ul class="img_list">

07	<li><a href="#">"demo.jpg"alt=""></a></li>

08	<li><a href="#">"demo.jpg"alt=""></a></li>

09	<li><a href="#">"demo.jpg"alt=""></a></li>

10	<li><a href="#">"demo.jpg"alt=""></a></li>

11	<li><a href="#">"demo.jpg"alt=""></a></li>

12

</ul>

To try to simplify the method, the spacing is ignored first.

Cutting width

Then each group of pictures as long as the more out of that part of the width (extrawidth) to find a way to solve the line. In order to ensure that the picture is not distorted, you can use the way of cutting, Li set a fixed width, and set Overflow:hidden, the picture itself or set the size of the original image, while the picture is set negative marginleft, to ensure that the picture is centered. The extra section width is trimmed by the same width for each picture, which ensures that each picture is cut evenly.

A simple formula for cropping: the width of the cropped image (marginleft) = the extra width (extrawidth)/number of pictures (imglength)/2

The following is a cut for a single picture.

1	<li style="width:100px;height:100px;overflow:hidden;">

2	<a href="#">

3	"width:104px;height:100px;margin-left:-2px"src="demo.jpg"alt="">

4

</a>

5

</li>

Crop picture Although can ensure that the picture is not distorted, and to ensure that each row of pictures of the row height is the same, but will lose the picture part of the left and right edge of the content, cut off the width of the size of the number of pictures according to how much to change, for a row of pictures more than the case (vertical chart more), this method

Is there any other way besides cutting?

Equal ratio Scaling

Trimming is to reduce the width of the picture, and to ensure that the picture is not distorted, the scale can also achieve the above mentioned two points, the processing of scaling is more difficult than cutting.

The previously calculated extrawidth, by scaling the image proportionally, evenly distributes the width of the zoom to each picture, which is the processing of the width of the image.

Simple formula for scaling relaxation: image scaled width (zoomwidth) = Picture original width (imgwidth) – Extra width (extrawidth)/number of pictures (imglength)

Since the width of the picture is scaled, the height of the picture is scaled in equal proportions. You can use the height of the first image as the base height.

Simple formula for datum height: datum height (baseheight) = picture original height (imgheight) – Extra width (extrawidth)/number of pictures (imglength)

Based on the calculated scale of the original width of the picture and the scaled width, you can calculate the height at which each picture should be scaled. The height of this scaling and the previously obtained datum height will have a certain discrepancy, if the height of the scale is greater than the height of the benchmark can be a negative margintop to cut the height of the picture, if the height of the scale is less than the height of the benchmark, you can then zoom in on the picture, and then the width of a certain cut. With these processes, each line is guaranteed to be as high as possible.

The cropping of the image is smaller than the scaling, which basically does not lose the contents of the original edge, but makes each row taller than the row height. Google + and Flickr are the same method of scaling, which is appropriate for large size and horizontal graphs.

Whether it is cutting or scaling, a row of pictures after the calculation will have a certain error value, the error value needs to be further processed, this is not difficult, not much to say.

If you have a good way to deal with it, you are welcome to discuss it with me.

January 28, 2014 updated the better algorithm: the algorithm for the layout of the high waterfall flow is discussed again.

Originally contained in: Rainy Night with knives ' s Blog
This article link: http://stylechen.com/not-fixed-width-imglist-layout.html

Layout of a non-equal-width picture List