Home > Article > Web Front-end > How to implement waterfall flow in CSS? Two ways to introduce
How to implement waterfall flow with CSS? The following article will introduce to you two ways to use CSS to implement waterfall flow. I hope it will be helpful to you!
Waterfall flow, also known as waterfall flow layout, is a popular website page layout method. It is often used when displaying multiple pictures on mobile phones. That is, multiple rows of equal-width elements are arranged, and subsequent elements are added to them in sequence, with equal width and unequal height. They are scaled according to the original proportion of the picture until the width reaches our requirements, and then placed in the specified position according to the rules.
So what are the implementation methods of waterfall flow layout?
column
Multi-line layout to implement waterfall flow
column
Implementing waterfall flow mainly relies on two attributes.
column-count
attribute controls how many columns the screen is divided into.
column-gap
attribute controls the distance between columns.
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>瀑布流布局-column</title> <style> .box { margin: 10px; column-count: 3; column-gap: 10px; } .item { margin-bottom: 10px; } .item img{ width: 100%; height:100%; } </style> </head> <body> <div class="box"> <div class="item"> <img src="./imgs/1.jpg" alt="1" /> </div> <div class="item"> <img src="./imgs/2.jpg" alt="2" /> </div> <div class="item"> <img src="./imgs/3.jpg" alt="3" /> </div> <div class="item"> <img src="./imgs/1.jpg" alt="1" /> </div> <div class="item"> <img src="./imgs/2.jpg" alt="2" /> </div> <div class="item"> <img src="./imgs/3.jpg" alt="3" /> </div> <div class="item"> <img src="./imgs/1.jpg" alt="1" /> </div> <div class="item"> <img src="./imgs/2.jpg" alt="2" /> </div> <div class="item"> <img src="./imgs/3.jpg" alt="3" /> </div> <div class="item"> <img src="./imgs/1.jpg" alt="1" /> </div> <div class="item"> <img src="./imgs/2.jpg" alt="2" /> </div> <div class="item"> <img src="./imgs/3.jpg" alt="3" /> </div> <div class="item"> <img src="./imgs/1.jpg" alt="1" /> </div> <div class="item"> <img src="./imgs/2.jpg" alt="2" /> </div> <div class="item"> <img src="./imgs/3.jpg" alt="3" /> </div> <div class="item"> <img src="./imgs/1.jpg" alt="1" /> </div> <div class="item"> <img src="./imgs/2.jpg" alt="2" /> </div> <div class="item"> <img src="./imgs/3.jpg" alt="3" /> </div> <div class="item"> <img src="./imgs/1.jpg" alt="1" /> </div> <div class="item"> <img src="./imgs/2.jpg" alt="2" /> </div> <div class="item"> <img src="./imgs/3.jpg" alt="3" /> </div> <div class="item"> <img src="./imgs/1.jpg" alt="1" /> </div> <div class="item"> <img src="./imgs/2.jpg" alt="2" /> </div> <div class="item"> <img src="./imgs/3.jpg" alt="3" /> </div> </div> </body> </html>
flex
Flexible layout to achieve waterfall flowThe display effect is as follows##flex
To implement waterfall flow, you need to set the outermost element to
display: flex, use elastic layout
flex-flow:column wrap
Setto arrange it vertically and Line wrap
height: 100vh
The width of each column can be set with theThe height to fill the screen, or it can be set to the height in units of
pxto accommodate child elements.
calc
function, that is,
width: calc(100%/3 - 20px). Divide it into equal-width
3columns and subtract the
margindistance twice on the left and right.
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .box { display: flex; flex-flow: column wrap; height: 100vh; } .item { margin: 10px; width: calc(100%/3 - 20px); } .item img{ width: 100%; height:100%; } </style> </head> <body> <div class="box"> <div class="item"> <img src="./imgs/1.jpg" alt="1" /> </div> <div class="item"> <img src="./imgs/2.jpg" alt="2" /> </div> <div class="item"> <img src="./imgs/3.jpg" alt="3" /> </div> <div class="item"> <img src="./imgs/1.jpg" alt="1" /> </div> <div class="item"> <img src="./imgs/2.jpg" alt="2" /> </div> <div class="item"> <img src="./imgs/3.jpg" alt="3" /> </div> <div class="item"> <img src="./imgs/1.jpg" alt="1" /> </div> <div class="item"> <img src="./imgs/2.jpg" alt="2" /> </div> <div class="item"> <img src="./imgs/3.jpg" alt="3" /> </div> <div class="item"> <img src="./imgs/1.jpg" alt="1" /> </div> <div class="item"> <img src="./imgs/2.jpg" alt="2" /> </div> <div class="item"> <img src="./imgs/3.jpg" alt="3" /> </div> <div class="item"> <img src="./imgs/1.jpg" alt="1" /> </div> </div> </body> </html>
Original address: https://juejin.cn/post/7011333433318178846Author: tangxd3For more programming-related knowledge, please visit:
Programming Video! !
The above is the detailed content of How to implement waterfall flow in CSS? Two ways to introduce. For more information, please follow other related articles on the PHP Chinese website!