Photo exhibition on Web page: equal height response layout implementation

What is the "equal high response layout"? Before introducing it, let us recall its relative "equal-width response waterfall Flow".

Recall that Pinterest, Google +, petal nets, beauty, and so on are you immersed in the continuous pull down to experience the rich picture reading?

That feeling is like shopping, so that all the goods presented on the Web page, only need to pull down the mouse can be browsed, constantly loaded, they are neat and tidy, because their width is equal, but the height varies.

This is called the "equal-width response waterfall Flow", which features the following:

1. Response, adapt to the PC end and the mobile end of each device to show a different width and a single number;

2. Equal width, such layout is very suitable for waterfall flow, there is a continuous downward reading sense;

3. No feet of the birds, because the content is constantly loading downward, so the footer is basically invisible;

Such a layout caused a trend, however, the picture to adapt to equal width, height, such as the proportion of changes, not to consider the container height of the implementation is not difficult, so the industry has mostly adopted such a layout, and can respond to, in different screen width can vary the width of the card.

However, the return to the topic, today to say and this is different, but similar, it is the "high responsive layout."

First look at the effect chart:

As the figure, not as simple as the same width, to do not change the resolution of the picture (width and height ratio) while maintaining a high and full line width, how to achieve? You might as well come with me with questions.

What is the 1-level high response layout?

① height is equal in the row;

The total width of ② is equal;

③ Adaptive width layout;

④ picture Resolution (width-height ratio) unchanged;

2 difficult to be there?

① line height is consistent, the row height is inconsistent, but the difference can not be too much;

② does not know how many pictures a row needs to fill the width, because the height is not sure, the width of the picture can not change;

③ How to achieve adaptive?

④ layout for the user's personal albums, the amount of data is limited and unknown, how to ensure that the number of pictures full line display?

From the above, this layout involves too many variables, and the hardest is to do not change the resolution of the picture, does not affect the quality of the picture effect.

Should do the following? My idea is: To determine a variable, other variables to adapt to this variable.

3 Solutions (detailed below will be shown)

① determines a variable. Because the current browser width is fixed, you can set a standard height based on the width of the browser, similar to the CSS media query;

② first transformation. All picture widths are scaled proportionally to the width of this standard height;

③ creates containers. Each line creates a div and loads as many pictures as possible until the container is not fit;

④ first step adjustment. Each line varies according to its width (current browser width), and then the ratio changes wide and high.

The formula is as follows: Current line total width/target width = current Height/change height of each picture;

⑤ second step adjustment. The width of each picture is changed according to the change of height.

4 Operation diagram

Workpiece! However, in-depth consideration and analysis, but also summed up a number of other issues, I used the following different methods to solve these problems.

5 other questions

① Height adjustment formula will produce a percentage, the browser will be directly rounded, so it may produce-2 to 2px error;

Solution: After adjusting the error value of each line gap, and then circulate the gap to each of the values of each picture, so that the first 2 pictures may have ±1px picture width changes, but the user is basically not aware of the slight tensile changes in the picture.

② user picture number may be too small, there will be only 1-3 photos of the situation, how to display layout;

Solution: Judge only 1 lines of pictures when not layout adjustment, less than 1 lines will be the default display of such high changes in the picture can be (that is, only once, do not need to be adaptive for the remaining value).

③ the remaining width before adjustment of each line is too large, which results in wide height after adjustment;

Solution: If the adjustment after the wide high is the original width of 150% or so the line to discard, taking into account the overall picture quality, to ensure that the picture wall effect is not affected.

④ users upload photos too small, such as 16x16 small icons, if the same way the adjustment will be with 400x800 these pictures side by side magnify, resulting in a large scaling ratio.

Solution: Taking into account the effect of the picture wall, there will be no user to pass some other pictures, such as facial material, and so on, at the same time in the picture processing can add a sort, get the picture wide and high after the picture is less than a certain value of the last show together;

6 other

There are currently 2 websites that have initially achieved this effect, such as Baidu Pictures and Flickr, as shown below:

However, our layout has the following advantages:

(1) Flickr is not compatible with the ie6-7, but because our project general user volume is larger than the same time to consider all users, so it is necessary to achieve compatibility IE6 above all browsers including a variety of modern browsers;

(2) Baidu actually did not do a perfect full width, such as the right side of the graph, each line will appear to the right, and our solution can avoid such errors (other problems ①);

7 Summary

The advantages of this layout are obvious: neat and changeable, rules and complex, in the most pure way to show the charm of the picture.

Just like a "website version of the photographic exhibition."

To achieve such a plan, the need for careful analysis, careful consideration, the complex effect will only reduce the display of the picture, so you need to do addition, rich function, and then do subtraction, to its dross.

Demo effect please click here.

This layout will be used in the QQ space V8 version of the new photographic control layout, please look forward to.

Thank you for your reading, this article by Tencent Isux Copyright, reprint, please specify the source, the offender will investigate, thank you for your cooperation.

Annotated source format: Tencent Isux (http://isux.tencent.com/high-equal-response-layout-html.html)