用css样式实现瀑布流效果
主要是CSS3 中的多列columns属性的运用
W3C中的columns
- 浏览器支持
Internet Explorer 10 和 Opera 支持 column 属性。
Firefox 支持替代的 -moz-column 属性。
Safari 和 Chrome 支持替代的 -webkit-column 属性。
**注释:**Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。
- CSS3 创建多列
column-count 属性规定元素应该被分隔的列数:
div{
//创建三列
column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
}
- CSS3 规定列之间的间隔
column-gap 属性规定列之间的间隔:
div{
//规定列之间 40 像素的间隔:
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}
- CSS3 列规则
column-rule 属性设置列之间的宽度、样式和颜色规则。
div{
//规定列之间的宽度、样式和颜色规则:
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}
- 新的多列属性
属性 | 描述 | CSS |
---|---|---|
column-count | 规定元素应该被分隔的列数。 | 3 |
column-fill | 规定如何填充列。 | 3 |
column-gap | 规定列之间的间隔。 | 3 |
column-rule | 设置所有 column-rule-* 属性的简写属性。 | 3 |
column-rule-color | 规定列之间规则的颜色。 | 3 |
column-rule-style | 规定列之间规则的样式。 | 3 |
column-rule-width | 规定列之间规则的宽度。 | 3 |
column-span | 规定元素应该横跨的列数。 | 3 |
column-width | 规定列的宽度。 | 3 |
columns | 规定设置 column-width 和 column-count 的简写属性。 | 3 |