css3 column實(shí)現(xiàn)卡片瀑布流布局的示例代碼

發(fā)布時(shí)間：2018-06-22 16:06:06 作者：soleil阿璐

我要評(píng)論

這篇文章主要介紹了css3 column實(shí)現(xiàn)卡片瀑布流布局的示例代碼的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

本文介紹了css3 column實(shí)現(xiàn)卡片瀑布流布局的示例代碼，分享給大家，具體如下：

實(shí)現(xiàn)效果

今天遇到了需要實(shí)現(xiàn)一個(gè)卡片的瀑布流布局的問題，卡片高度是不同的。

最后使用css3中的column屬性實(shí)現(xiàn)了這個(gè)布局，而且非常的簡便啊(lz隱約記得上次寫瀑布流的時(shí)候是用js實(shí)現(xiàn)的...naive啊)

實(shí)現(xiàn)效果大概如下圖～

相關(guān)屬性

column-count:想實(shí)現(xiàn)的列數(shù)，我這里只需要2列
column-width:列的寬度
column-gap:列之間的間隙
break-inside:avoid:如果不將子元素(每個(gè)卡片)設(shè)置這個(gè)屬性的話，就會(huì)出現(xiàn)一張卡片被截?cái)囡@示在不同的列中的情況

遇到的問題

實(shí)現(xiàn)過程中遇到了一個(gè)小問題，我的卡片底部border會(huì)被截掉一塊
通過設(shè)置子元素的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;
                }
        }

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。