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>

View Code