在css3到来之前，都是用js来操作dom元素，计算位置，大小，形成瀑布流布局。但是有了css3之后，一切实现起来就太简单了，没有复杂的逻辑，轻松的几行样式代码就可以搞定。
回顾以前（js瀑布流）基于waterfall.js（11.8kb）,还得写入基础的样式，初始化等等，对比其他js，已经是很简单了。
var waterfall = new WaterFall({
container: '#waterfall',
pins: ".pin",
loader: '#loader',
gapHeight: 20,
gapWidth: 20,
pinWidth: 216,
threshold: 100
});
但是，有了css3，再简洁的js，都比不过简单的css代码。
display: flex关键点，横向 flex 布局嵌套多列纵向 flex 布局，使用了 vw 进行自适应缩放
// 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）的，可以先去了解一下。其实看大致也就懂了，就是循环多个元素，没有复杂的逻辑。
$lineCount: 4;
$count: 8;
// 随机数（瀑布流某块的高度）
@function randomNum($max, $min: 0, $u: 1) {
@return ($min + random($max)) * $u;
}
// 随机颜色值
@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();
// 瀑布流某块中间的数字
&::after {
content: "#{$j}";
position: absolute;
color: #fff;
font-size: 24px;
// 水平垂直居中
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
}
}
预览：
演示地址： CSS 实现瀑布流布局（display: flex）
column-count关键点，
column-count: 元素内容将被划分的最佳列数
break-inside: 避免在元素内部插入分页符
// pug 模板引擎
div.g-container
-for(var j = 0; j<32; j++)
div.g-item
column-count 看起来比display: flex更科学，模板不需要2层循环，更简洁明了。如果真正用到数据上面，会更好处理。
$count: 32;
// 随机数（瀑布流某块的高度）
@function randomNum($max, $min: 0, $u: 1) {
@return ($min + random($max)) * $u;
}
// 随机颜色值
@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%);
}
}
}
预览：
演示地址： CSS 实现瀑布流布局（column-count）
display: grid关键点，
使用 grid-template-columns、grid-template-rows 分割行列
使用 grid-row 控制每个 item 的所占格子的大小
// pug 模板引擎
div.g-container
-for(var i = 0; i<8; i++)
div.g-item
样式
$count: 8;
// 随机数（瀑布流某块的高度）
@function randomNum($max, $min: 0, $u: 1) {
@return ($min + random($max)) * $u;
}
// 随机颜色值
@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。
预览：
演示地址： CSS 实现瀑布流布局（display: grid）
总结通过，这3种CSS瀑布流布局，你更喜欢哪一种呢？
个人更喜欢column-count，看起来更加清晰，容易理解，代码量也很少。
