How does a pure CSS implement waterfall flow? Two ways to implement waterfall flow in CSS

Waterfall flow layout Feeling is pretty good, so this article will give you to share the CSS to achieve waterfall flow two ways, through the multi-column multi-column layout to achieve waterfall flow and flex layout to achieve waterfall flow.

1.multi-column multi-column layout for waterfall flow

Let's briefly talk about some of the multi-column related properties

• Column-count setting the number of columns

• Column-gap to set the spacing between columns

• Column-width Setting the width of each column

Also to set break-inside in a sub-container to prevent multiple column layouts, unexpected interrupts in paged media and multi-zone contexts

The Break-inside property value  Auto  Specifies that page/column interrupts within an element are neither enforced nor suppressed.  Avoid  Specifies to avoid page breaks within an element.  avoid-page  Specifies to avoid page breaks within an element.  avoid-column Specifies to avoid column breaks within an element.  avoid-region  Specifies to avoid zone breaks within an element.

• The part that is intercepted and fills itself

/* HTML file */<!--use Multi-columns to implement waterfall streams--><div id= "root" > <div class= "Item" >  <div class=" UserInfo ">  <span class=" username "> holding your left hand to protect you </span> </div> </d iv> <div class= "Item" >  <div class=" UserInfo ">  <span class=" username "> holding your left hand to protect you </span> </div> </d iv> <div class= "Item" >  <div class=" UserInfo ">  <span class=" username "> holding your left hand to protect you </span> </div> </d      iv> <div class= "Item" >   <div class=" UserInfo ">  <span class=" username "> holding your left hand to protect you </span> </div> </d iv> <div class= "Item" >  <div class=" UserInfo ">  <span class=" username "> holding your left hand to protect you </span> </div> </d Iv></div>

/* CSS style */body {    background: #e5e5e5;} /* Waterfall Stream Outermost */#root {     margin:0 auto;     width:1200px;     Column-count:5;     column-width:240px;     column-gap:20px;} /* Each column of the picture contains the layer */.item {     margin-bottom:10px;     /* Prevent unexpected interrupts in multi-column layouts, paged media, and multi-region contexts */     break-inside:avoid;     Background: #fff;}. item:hover {     box-shadow:2px 2px 2px rgba (0, 0, 0,. 5);} /* Picture */.itemimg {     width:100%;     Vertical-align:middle;} /* The information under the picture contains layer */.userinfo {     padding:5px 10px;}. Avatar {     vertical-align:middle;     width:30px;     height:30px;     border-radius:50%;}. username {     margin-left:5px;     text-shadow:2px 2px 2px rgba (0, 0, 0,. 3);}

2.flex layout for waterfall flow

• Sets the outer layer to the row layout, and then sets a container and sets it to the column layout, which is implemented as a whole, and then the column is divided, and the joins is wide fixed to achieve the

/* HTML file (two-column layout only) */<div id= "root" > <div class= "Itemcontainer" > <div class= "Item" >  <div class=" UserInfo ">  <span class=" username "> holding your left hand to protect you </span> </div> </div> <div class= "Item" >  <div class=" UserInfo ">  <span class=" username "> holding your left hand to protect you </span> </div> </div> <div class= "Item" >  <div class=" UserInfo ">  <span class=" username "> holding your left handProtect you </span> </div> </div> <div class= "Item" >  <div class=" UserInfo ">  <span class=" username "> holding your left hand to protect you </span> </div> </div> <div class= "Item" >  <div class=" UserInfo ">  <span class=" username "> holding your left hand to protect you </span> </div> </div> <div class= "Item" >  <div class=" UserInfo ">  <span class=" username "> holding your left hand to protect you </span>           </div> </div> <div class= "Item" >  <div class=" UserInfo ">  <span class=" username "> holding your left hand to protect you </span> </div>  </div> </div> <div class= "Itemcontainer" > <div class= "Item" >  <div class=" UserInfo ">  <span class=" username "> holding your left hand to protect you </span> </div> </div> <div class= "Item" >  <div class=" UserInfo ">  <span class="username" > holding your left hand to protect you </span> </div> </div> <div class= "Item" >  <div class=" UserInfo ">  <span class=" username "> holding your left hand to protect you </span> </div> </div> <div class= "Item" >  <div class=" UserInfo ">  <span class=" username "> holding your left hand to protect you </span> </div> </div> <div class= "Item" >  <div class=" UserInfo ">  <span class=" username "> HoldYour left hand is protecting you </span> </div> </div> <div class= "Item" >  <div class=" UserInfo ">  <span class=" username "> holding your left hand to protect you </span> </div> </div> </div></div>

/* CSS file */body{   background: #e5e5e5;} #root {    Display:flex;    Flex-direction:row;    margin:0 Auto;    width:1200px;}. itemcontainer{    margin-right:10px;    Flex-direction:column;    width:240px;}. item{   margin-bottom:10px;   Background: #fff;}. itemimg{   width:100%;}. UserInfo {   padding:5px 10px;}. Avatar {   vertical-align:middle;   width:30px;   height:30px;   border-radius:50%;}. username {   margin-left:5px;   text-shadow:2px 2px 2px rgba (0, 0, 0,. 3);}

Practice found that the pure CSS implementation of the waterfall flow can only be a column of the arrangement, so still have to use JS to achieve waterfall flow more consistent with our common waterfall flow