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.
/* 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