Summary of Vue front-end interview questions (12) Detailed explanation of the principle of waterfall flow

Waterfall principle

Many times we will see some websites or websites that display pictures. Their pictures are obviously different in height and size, but they can automatically adapt, display them in rows, and when they are pulled down to the end, the loaded pictures Will automatically adapt, this is the waterfall flow
Insert picture description here

Waterfall realization

1. The first row of css needs to be implemented by ourselves, so that the picture is of equal width and different height

2. Use js to calculate the column with the smallest image height in each column, and then insert it in a loop, and then continue to find the position of the next image with the smallest height, and continue to insert

Insert picture description here

Guess you like

Origin blog.csdn.net/Rick_and_mode/article/details/108615483