Photo exhibition on the Web: a high-response layout to achieve

What is a "high-response layout"? Before we introduce it, let's recall its close relatives, "equal-width-response waterfall flow."

Recall, Pinterest, Google +, petal nets, Beauty said and so on whether to immerse you in the continuous pull down experience rich picture view?

That feeling is like shopping, so that all products appear on the page, only need to pull down the mouse can be browsed, constantly loading, they concise and neat, because their width is equal, but the height is different.

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

1. Responsive design, adapt to PC-side and mobile devices to present different widths and single-column number;

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

3. No foot of the bird, because the content is constantly downward loading, so the footer is basically not seen;

Such a layout caused a trend, however, the picture to adapt to equal width, height and other proportions of the change, do not consider the height of the container to achieve the implementation is not difficult, so the industry has mostly adopted such a layout, and can be responsive, in different screen width can change the width of different cards.

However, the return to the point, today to say and this is different, but similar, it is "such a high-response layout."

First Look at:

, not as simple as width, how to do it without changing the image resolution (aspect ratio) while maintaining the same height and full line width? You might as well come with me with questions.

1 What is a high-response layout?

① the height of the line is equal;

② The total width of the rows is equal;

③ self-adapting width layout;

④ picture resolution (aspect ratio) unchanged;

2 difficult to be there?

The height of ① line is consistent, the row height is inconsistent, but the difference cannot be too much;

② do not know how many pictures to occupy the width of a row, due to the height of uncertainty, the width of the picture can not be equal to change;

③ How to do adaptive?

④ layout for the user's personal album, 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 most difficult is to do not change the resolution of the picture, does not affect the image quality effect.