Detailed description of css layout for non-width image lists

Major seo/seo.html "target =" _ blank "> the search results page of the search engine's image channel contains relatively fragmented images, the image quality and size are uneven, and the total width of each row is limited. This kind of non-width image list is also useful in Google + and flickr.

Recently, I reconstructed and revised the image search result page for 360 searches. I also thought about this image layout. Next I will talk about some of my solutions.

A single image with non-equal width needs to be arranged in a fixed-width container, which is the biggest limitation and obstacle, I began to miss the layout of the common wide waterfall flow (no restrictions are good ).

Consider the following basic requirements:

• 1. The image width is not fixed;
• 2. The image height is fixed;
• 3. The total width of each row of images is fixed, so the number of images that each row can accommodate cannot be determined;
• 4. Ensure that the image quality remains the same, and there cannot be any distortion caused by stretch deformation;
• 5. The spacing between images is fixed;

Select a set of image data and calculate the total image width. When the width is just greater than or equal to the fixed width of a row, this is a set of source images to be processed, this should be the case before processing.

In the unit of a row of images, a ul list is used to store this row of images and li floats. The total width of a set of source images is usually greater than the width of a row. It is rare that the width is equal. If the width is too large, the floating layout will inevitably cause the last image to fall. The basic HTML structure is as follows.

The code is as follows:	Copy code
<STYLE type = text/css> . Img_list {/* fixed width of the row */overflow: hidden} . Img_list li {float: left ;} </STYLE> <UL class = img_list> <LI> <A href = "#"> </A> </LI> <LI> <A href = "#"> </A> </LI> <LI> <A href = "#"> </A> </LI> <LI> <A href = "#"> </A> </LI> <LI> <A href = "#"> </A> </LI> </UL>

In order to simplify the method as much as possible, the spacing is ignored first.

Crop width

Then, you only need to find a solution to remove the extra width of each set of images. To ensure that the image is not distorted, you can use the cropping method. li sets a fixed width and overflow: hidden. The image itself is still the size of the source image, and sets negative marginLeft for the image, make sure that the image is centered. Crop the extra part of the image with the same width to ensure that each image is evenly cropped.

Simple cutting formula:The image cropping width (marginLeft) = extra width (extraWidth)/number of images (imgLength)/2

Below is the cropping of a single image.

The code is as follows:	Copy code
<LI style = "WIDTH: 100px; HEIGHT: 100px; OVERFLOW: hidden"> <A href = "#"> </A> </LI>

Although image cropping ensures that the image is not distorted and the row height of each row is the same, it will lose part of the content on the left and right sides of the image, the size of the cropped width varies according to the number of images in a row. This method is good when the number of images in a row is large (the number of vertical images is large.

Are there other methods besides cropping?

Proportional scaling

Cropping is to reduce the width occupied by the image and ensure that the image is not distorted. Scaling can also achieve the two points mentioned above. Scaling is more troublesome than cropping.

The previously calculated extraWidth is evenly allocated to each image by proportional scaling of the image. This is the processing of the image width.

Simple formula for zooming width:ZoomWidth = imgWidth-extraWidth/imgLength)

Since it is proportional scaling, after the image width is scaled, the image height must be scaled in an equal proportion. You can use the height of the first image as the reference height.

Simple formula for reference height:Baseline height = imgHeight-extraWidth/imgLength)

Based on the original width of the image and the scaled width, you can calculate the proportional zoom height of each image. The scaled height may differ from the previously obtained baseline height. If the scaled height is greater than the baseline height, you can use the negative marginTop method to crop the image height, if the scaled height is smaller than the baseline height, you can scale up the image proportionally, and then crop the image width to a certain extent. Through these processing, we can ensure that each row is of a high level.

Proportional scaling will crop the image very little, and basically won't lose the content at the edge of the source image. However, it will make the row height different, and the row height cannot be fixed. Google + and flickr adopt the proportional scaling method. This method is suitable for large-sized and horizontal graphs.

Whether it is cropping or scaling, a row of images will have a certain error value after calculation, and the error value needs to be further processed. This is not hard to say.

If you have a good solution, please feel free to discuss it with me.