CSS瀑布流模型

CSS里的多列是指对数目比较多的数据，浏览器可以对其划分列来排布，以达到更加适宜和美观的效果，我们可以利用多列的功能来实现瀑布流的页面效果

首先我们先用一个例子学习一下多列的使用

多列的属性包括：

column-count    列数

column-gap  各列之间的间隙的宽度

column-rule 间隙分割线的宽度和颜色设置

column-width 列宽

我们注意这里-webkit-column-count的使用，这是因为浏览器不支持此属性，为了能在浏览器上显示出我们需要的效果，使用此方法可以让浏览器支持此属性

-webkit-    Chrome

-ms-      IE

-o-      Opera

-moz-    Firefox

div{
    column-count:4 ;
    -webkit-column-count: 4;
    column-gap: 50px;
    -webkit-column-gap: 50px;
    column-rule: 5px outset #ff00ff;
    -webkit-column-rule:5px outset #ff00ff ;
    font-family: Aparajita;
    font-size: 20px;
}

这样的CSS代码最后的效果

然后我们学习如何利用多列实现瀑布流

.container{
    column-width: 250px;
    -webkit-column-width: 250px;
    column-gap: 5px;
    -webkit-column-gap: 5px;

}
.container div{
    width: 250px;
    margin: 5px 0;
}

效果如下