Home  >  Article  >  Web Front-end  >  Pure js implements waterfall flow to display photos (automatically adapts to window size)_javascript skills

Pure js implements waterfall flow to display photos (automatically adapts to window size)_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:37:541236browse

There is nothing better than using waterfall flow to display photos. The following is an implementation method of waterfall flow (the length of each row is equal to the length of the browser window). It can also be implemented using CSS3. It is very simple. You will know it after searching Google.

My idea is to insert pictures one by one. When the aspect ratio of the pictures in this row remains unchanged and the height is lower than 250, a cycle is completed, that is, this row is inserted.

Then enter the next loop to insert the next line. The formula is very simple. Assume that the current height of this row is h, then when inserting a picture with a height and width of (x, y), the following relationship is satisfied:
h' * (w / h y / x) = w
w is the width of the browser window,
then h' = w / (w / h y / x);

Copy code The code is as follows:











Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn