效果如下
 

二、column 多行布局實現(xiàn)瀑布流

思路分析：

column 實現(xiàn)瀑布流主要依賴兩個屬性。
一個是 column-count 屬性，是分為多少列。
一個是 column-gap 屬性，是設(shè)置列與列之間的距離。

代碼實現(xiàn)：

效果如下：
 

三、flex 彈性布局實現(xiàn)瀑布流

思路分析：

flex 實現(xiàn)瀑布流需要將最外層元素設(shè)置為 display: flex，即橫向排列。然后通過設(shè)置 flex-flow:column wrap 使其換行。設(shè)置 height: 100vh 填充屏幕的高度，來容納子元素。每一列的寬度可用 calc 函數(shù)來設(shè)置，即 width: calc(100%/3 - 20px)。分成等寬的 3 列減掉左右兩遍的 margin 距離。

代碼實現(xiàn)：

以上就是怎么實現(xiàn)瀑布流布局，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。