css3 column實現卡片瀑布流佈局

實現效果

• 今天遇到了須要實現一個卡片的瀑布流佈局的問題，卡片高度是不一樣的。
• 最後使用css3中的column屬性實現了這個佈局，並且很是的簡便啊(lz隱約記得上次寫瀑布流的時候是用js實現的...naive啊)
• 實現效果大概以下圖～

相關屬性

• column-count:想實現的列數，我這裏只須要2列
• column-width:列的寬度
• column-gap:列之間的間隙
• break-inside:avoid:若是不將子元素(每一個卡片)設置這個屬性的話，就會出現一張卡片被截斷顯示在不一樣的列中的狀況

遇到的問題

• 實現過程當中遇到了一個小問題，個人卡片底部border會被截掉一塊
• 經過設置子元素的overflow:auto解決了

代碼

.videoCards {
            padding-top: 4rpx;
            column-count: 2;
            column-gap: 18rpx;

            .card {
                display: inline-block;
                margin-top: 20rpx;
                width: 326rpx;
                background: #FFFFFF;
                box-shadow: 0 0 10rpx 0 rgba(0,0,0,0.10);
                border-radius: 14rpx;
                break-inside: avoid;
                padding-bottom: 20rpx;
                overflow: auto;
                }
        }