基于css3 column-width 实现的瀑布流

瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。

现在流式布局的网站很多,大多都是采用浮动的方式实现的。今天我们尝试采用css3的新属性column-width的分栏来实现瀑布流。

话不多说,直接上代码:

1
2
3
4
5
6
7
8
9
10
11
12
ul{
/**栏宽**/
-webkit-column-width:300px;
-moz-column-width:300px;
-o-column-width:300px;
column-width:300px;
/**栏间距**/
-webkit-column-gap:1px;
-moz-column-gap:1px;
-o-column-gap:1px;
column-gap:1px;
}

2015-08-23 补充

前几天做了阿里的在线笔试题,一起做的小伙伴遇到了一个需要实现两列瀑布流的问题。想来想去用其他的方法一时半会也写不出来,还不就这样。于是去看了一下css3的介绍文档,发现有一个column-count属性,是指定分几列。有点儿靠谱,直接上手试试,果然行,直接上代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
/**栏宽**/
/* -webkit-column-width:300px;
-moz-column-width:300px;
-o-column-width:300px;
column-width:300px; */
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
/**栏间距**/
-webkit-column-gap:1px;
-moz-column-gap:1px;
-o-column-gap:1px;
column-gap:1px;

在线查看效果:戳我戳我