CSS3——瀑布流，多列（Multi-column）

示例——瀑布流

<div class="view">
     <div class="item">
         ![](xx)
     </div>
</div>
<style>
    .view{
        column-count: 2; // 設置顯示2列
        column-gap: 2px; //設置或檢索對象的列與列之間的間隙為2px
        width: 100%;
    }
    .item{
        width: 95%;
        background: #fefefe;
        border: 2px solid #fcfcfc;
        box-shadow: 0px 2px 2px rgba(34, 25, 25, 0.4);
        margin: 5px 2px 2px 2px;
        padding: 1px;
        transition: opacity .4s ease-in-out; // 檢索或設置對象變換時的過渡
        display: inline-block;
    }
    .item img{
        width: 100% !important;
        display:block;
    }
</style>

效果圖

多列

columns：<' column-width '> || <' column-count '>
設置或檢索對象的列數和每列的寬度。復合屬性

/*列數及列寬固定*/
-moz-columns:200px 3;
-webkit-columns:200px 3;
columns:200px 3;

/*列寬固定，根據容器寬度液態分布列數*/
-moz-columns:200px;
-webkit-columns:200px;
columns:200px;

column-width：<length> | auto
設置或檢索對象每列的寬度；
auto：根據 <' column-count '> 自定分配寬度

/*列寬固定，根據容器寬度液態分布列數*/
-moz-column-width:200px;
-webkit-column-width:200px;
column-width:200px;

column-count：<integer> | auto
設置或檢索對象的列數；
auto：根據 <' column-width '> 自定分配寬度

/*列數固定，根據容器寬度液態分布列寬*/
-moz-column-count:5;
-webkit-column-count:5;
column-count:5;

column-gap：<length> | normal
設置或檢索對象的列與列之間的間隙

/*固定列間隙為40px*/
-moz-column-gap:40px;
-webkit-column-gap:40px;
column-gap:40px;

/*列間隙column-gap:normal；font-size為14px時，列間隙column-gap:normal的計算值也為14px*/
-moz-column-gap:normal;
-webkit-column-gap:normal;
column-gap:normal;

column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>
設置或檢索對象的列與列之間的邊框。復合屬性

/*在列與列之間設置綠色間隔線*/
-moz-column-rule:10px solid #090;
-webkit-column-rule:10px solid #090;
column-rule:10px solid #090;

column-rule-width：<length> | thin | medium | thick
medium：定義默認厚度的邊框;
thin：定義比默認厚度細的邊框;
thick：定義比默認厚度粗的邊框

column-fill：auto | balance
設置或檢索對象所有列的高度是否統一;
auto： 列高度自適應內容;
balance： 所有列的高度以其中最高的一列統一

column-break-before：auto | always | avoid | left | right | page | column | avoid-page | avoid-column
設置或檢索對象之前是否斷行;
auto： 既不強迫也不禁止在元素之前斷行並產生新列;
always： 總是在元素之前斷行並產生新列
avoid：避免在元素之前斷行並產生新列

column-break-after：auto | always | avoid | left | right | page | column | avoid-page | avoid-column
設置或檢索對象之后是否斷行

column-break-inside：auto | avoid | avoid-page | avoid-column
設置或檢索對象內部是否斷行;
auto：既不強迫也不禁止在元素內部斷行並產生新列;
avoid：避免在元素內部斷行並產生新列