基于CSS3实现瀑布流,使用CSS3的CSS 多栏(Multi-column)。
瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。我们只是实现了多栏的布局。
Properties
属性
CSS Version
版本
Inherit From Parent
继承性
Description
简介
<a href="http://www.cnblogs.com/css3/properties/multi-column/columns.html">columns</a>
CSS3
无
CSS3 columns 属性,是复合属性,设置或检索对象的列数和每列的宽度。
<a href="http://www.cnblogs.com/css3/properties/multi-column/column-width.html">column-width</a>
CSS3 column-width 属性,设置或检索对象每列的宽度
<a href="http://www.cnblogs.com/css3/properties/multi-column/column-count.html">column-count</a>
CSS3 column-count 属性,设置或检索对象的列数
<a href="http://www.cnblogs.com/css3/properties/multi-column/column-gap.html">column-gap</a>
CSS3 column-gap 属性,设置或检索对象的列与列之间的间隙
<a href="http://www.cnblogs.com/css3/properties/multi-column/column-rule.html">column-rule</a>
CSS3 column-rule 属性,是复合属性。设置或检索对象的列与列之间的边框。
<a href="http://www.cnblogs.com/css3/properties/multi-column/column-rule-width.html">column-rule-width</a>
CSS3 column-rule-width 属性,设置或检索对象的列与列之间的边框厚度。
<a href="http://www.cnblogs.com/css3/properties/multi-column/column-rule-style.html">column-rule-style</a>
CSS3 column-rule-style 属性,设置或检索对象的列与列之间的边框样式。
<a href="http://www.cnblogs.com/css3/properties/multi-column/column-rule-color.html">column-rule-color</a>
CSS3 column-rule-color 属性,设置或检索对象的列与列之间的边框颜色。
<a href="http://www.cnblogs.com/css3/properties/multi-column/column-span.html">column-span</a>
CSS3 column-span 属性,设置或检索对象元素是否横跨所有列。
<a href="http://www.cnblogs.com/css3/properties/multi-column/column-fill.html">column-fill</a>
CSS3 column-fill 属性,设置或检索对象所有列的高度是否统一。
<a href="http://www.cnblogs.com/css3/properties/multi-column/column-break-before.html">column-break-before</a>
CSS3 column-break-before 属性,设置或检索对象之前是否断行。
<a href="http://www.cnblogs.com/css3/properties/multi-column/column-break-after.html">column-break-after</a>
CSS3 column-break-after 属性,设置或检索对象之后是否断行。
<a href="http://www.cnblogs.com/css3/properties/multi-column/column-break-inside.html">column-break-inside</a>
CSS3 column-break-inside 属性,设置或检索对象内部是否断行。
先来写一个简单的图片页面
假设,宽和高都是350,生成链接为http://placekitten.com/350/350,访问这个link就会得到一张350X350的可爱的小猫图片~~O(∩_∩)O~~
然后,添加相应的CSS即可
其中的 column-count 代表分成几列,column-gap 代表列和列之间的宽度,你可以根据自己的需要调整。我们还可以使用 column-width 来定义列宽。
这样就完成了,是不是很简单~~
最后效果图如下
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcuEmZ1YDNwYzMyMDZ0QTZlFDMkhjYwgzN1MWNlhDNiN2MfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.png)