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

Source: Internet
Author: User
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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.