CSS3 achieve waterfall flow layout

 Speak dry, not long-winded, waterfalls flow layout is kind of a common layout, commonly used in picture-related style of the display, by multiple columns (Multi-column) CSS3 attributes, you can simply achieve a similar effect.

 

Specific steps:

1. The outer container is provided a plurality of rows the number of columns (column-count) and column spacing (column-gap)

2. Set the content items break-inside property avoid, in the item generally not interrupted.

 

HTML structure:

 

<div class="container"> //最外层容器
    <div class="item">//条目
         <div class="item__content">//条目内容
            <img src=''>
         </div>
     </div>
     <div class="item">
         <div class="item__content">
              <img src=''>
         </div> 
     </div>
     <!-- more items --> 
        .........
</div>        

 

css style:

 

{.container 
    column -count:. 4; // plurality of rows of columns 
    column-GAP: 0; // column spacing 
} 

.Item { 
    BREAK -inside: Avoid; // to avoid any interruption inserted (box body page, column or region). 
}

 

 

 

The above is the core code, we need to do to further improve in accordance with specific business, such as adding a prefix browser, set the element width and height and position, and so on.