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>

/*列数及列宽固定*/
-moz-columns:200px 3;
-webkit-columns:200px 3;
columns:200px 3;

/*列宽固定，根据容器宽度液态分布列数*/
-moz-columns:200px;
-webkit-columns:200px;
columns:200px;

/*列宽固定，根据容器宽度液态分布列数*/
-moz-column-width:200px;
-webkit-column-width:200px;
column-width:200px;

/*列数固定，根据容器宽度液态分布列宽*/
-moz-column-count:5;
-webkit-column-count:5;
column-count:5;

/*固定列间隙为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;

/*在列与列之间设置绿色间隔线*/
-moz-column-rule:10px solid #090;
-webkit-column-rule:10px solid #090;
column-rule:10px solid #090;