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

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: