前言

在css3到來(lái)之前，都是用js來(lái)操作dom元素，計(jì)算位置，大小，形成瀑布流布局。但是有了css3之后，一切實(shí)現(xiàn)起來(lái)就太簡(jiǎn)單了，沒有復(fù)雜的邏輯，輕松的幾行樣式代碼就可以搞定。

回顧以前（js瀑布流）

基于waterfall.js（11.8kb）,還得寫入基礎(chǔ)的樣式，初始化等等，對(duì)比其他js，已經(jīng)是很簡(jiǎn)單了。

var waterfall = new WaterFall({ 
 container: '#waterfall', 
 pins: ".pin", 
 loader: '#loader', 
 gapHeight: 20, 
 gapWidth: 20, 
 pinWidth: 216, 
 threshold: 100 
});

但是，有了css3，再簡(jiǎn)潔的js，都比不過簡(jiǎn)單的css代碼。

display: flex

關(guān)鍵點(diǎn)，橫向 flex 布局嵌套多列縱向 flex 布局，使用了 vw 進(jìn)行自適應(yīng)縮放

// pug 模板引擎
div.g-container
 -for(var i = 0; i<4; i++)
 div.g-queue
 -for(var j = 0; j<8; j++)
 div.g-item

不熟悉pug模板（jade）的，可以先去了解一下。其實(shí)看大致也就懂了，就是循環(huán)多個(gè)元素，沒有復(fù)雜的邏輯。

$lineCount: 4;
$count: 8;
// 隨機(jī)數(shù)（瀑布流某塊的高度）
@function randomNum($max, $min: 0, $u: 1) {
 @return ($min + random($max)) * $u;
}
// 隨機(jī)顏色值
@function randomColor() {
 @return rgb(randomNum(255), randomNum(255), randomNum(255));
}
.g-container {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 overflow: hidden;
}
.g-queue {
 display: flex;
 flex-direction: column;
 flex-basis: 24%;
}
.g-item {
 position: relative;
 width: 100%;
 margin: 2.5% 0;
}
@for $i from 1 to $lineCount+1 {
 .g-queue:nth-child(#{$i}) {
 @for $j from 1 to $count+1 {
 .g-item:nth-child(#{$j}) {
 height: #{randomNum(300, 50)}px;
 background: randomColor();
 // 瀑布流某塊中間的數(shù)字
 &::after {
 content: "#{$j}";
 position: absolute;
 color: #fff;
 font-size: 24px;
 // 水平垂直居中
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }
 }
 }
 }
}

預(yù)覽：

CSS3實(shí)現(xiàn)瀑布流布局(display: flex/column-count/display: grid)

CSS 實(shí)現(xiàn)瀑布流布局（display: flex）

演示地址：點(diǎn)擊文章結(jié)尾“了解更多”

column-count

關(guān)鍵點(diǎn)， column-count: 元素內(nèi)容將被劃分的最佳列數(shù) break-inside: 避免在元素內(nèi)部插入分頁(yè)符

// pug 模板引擎
div.g-container
 -for(var j = 0; j<32; j++)
 div.g-item

column-count 看起來(lái)比display: flex更科學(xué)，模板不需要2層循環(huán)，更簡(jiǎn)潔明了。如果真正用到數(shù)據(jù)上面，會(huì)更好處理。

$count: 32;
// 隨機(jī)數(shù)（瀑布流某塊的高度）
@function randomNum($max, $min: 0, $u: 1) {
 @return ($min + random($max)) * $u;
}
// 隨機(jī)顏色值
@function randomColor() {
 @return rgb(randomNum(255), randomNum(255), randomNum(255));
}
.g-container {
 column-count: 4;
 column-gap: .5vw;
 padding-top: .5vw;
}
.g-item {
 position: relative;
 width: 24vw;
 margin-bottom: 1vw;
 break-inside: avoid;
}
@for $i from 1 to $count+1 {
 .g-item:nth-child(#{$i}) {
 height: #{randomNum(300, 50)}px;
 background: randomColor();
 &::after {
 content: "#{$i}";
 position: absolute;
 color: #fff;
 font-size: 2vw;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }
 }
}

預(yù)覽：

CSS 實(shí)現(xiàn)瀑布流布局（column-count）

演示地址：點(diǎn)擊文章結(jié)尾“了解更多”

display: grid

關(guān)鍵點(diǎn)，使用 grid-template-columns、grid-template-rows 分割行列使用 grid-row 控制每個(gè) item 的所占格子的大小

// pug 模板引擎
div.g-container
 -for(var i = 0; i<8; i++)
 div.g-item

樣式

$count: 8;
// 隨機(jī)數(shù)（瀑布流某塊的高度）
@function randomNum($max, $min: 0, $u: 1) {
 @return ($min + random($max)) * $u;
}
// 隨機(jī)顏色值
@function randomColor() {
 @return rgb(randomNum(255), randomNum(255), randomNum(255));
}
.g-container {
 height: 100vh;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: repeat(8, 1fr);
}
@for $i from 1 to $count+1 {
 .g-item:nth-child(#{$i}) {
 position: relative;
 background: randomColor();
 margin: 0.5vw;
 &::after {
 content: "#{$i}";
 position: absolute;
 color: #fff;
 font-size: 2vw;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }
 }
}
.g-item {
 &:nth-child(1) {
 grid-column: 1;
 grid-row: 1 / 3;
 }
 &:nth-child(2) {
 grid-column: 2;
 grid-row: 1 / 4;
 }
 &:nth-child(3) {
 grid-column: 3;
 grid-row: 1 / 5;
 }
 &:nth-child(4) {
 grid-column: 4;
 grid-row: 1 / 6;
 }
 &:nth-child(5) {
 grid-column: 1;
 grid-row: 3 / 9;
 }
 &:nth-child(6) {
 grid-column: 2;
 grid-row: 4 / 9;
 }
 &:nth-child(7) {
 grid-column: 3;
 grid-row: 5 / 9;
 }
 &:nth-child(8) {
 grid-column: 4;
 grid-row: 6 / 9;
 }
}

display: grid樣式上面感覺也不好用，需要書寫很多grid-column、grid-row。

預(yù)覽：