简单CSS输入瀑布流布局

也算自己记录一下吧，

利用 column-count   和  break-inside   这两个CSS属性即可

搜了下这两个具体属性，好像有浏览器不兼容，在属性前边加去即可  （我没咋用，自己尝试吧。。。

兼容介绍：

-ms-                   IE浏览器

-moz-                火狐

-o-                     欧朋。。。。。。。。。。。。

还有一些菜鸟里面有介绍，

好了，上图：

 

看了上边两个属性链接的应该知道了，

column-count     ：是指明把div元素中 文本划分成几列

跟他配套的还有两个：

Column-gap： 指定一个xx像素的列之间的差距（就是分成两列后，中间距离是多少，可以手动设置，

Column-rule：列之间的规则：宽度，样式和颜色（跟 border 差不多

Column-rule 样式可取的值	描述
none	定义没有规则。
hidden	定义隐藏规则。
dotted	定义点状规则。
dashed	定义虚线规则。
solid	定义实线规则。
double	定义双线规则。
groove	定义 3D grooved 规则。该效果取决于宽度和颜色值。
ridge	定义 3D ridged 规则。该效果取决于宽度和颜色值。
inset	定义 3D inset 规则。该效果取决于宽度和颜色值。
outset	定义 3D outset 规则。该效果取决于宽度和颜色值。

 

 

break-inside ：容器中途分割

CSS属性描述了在多列布局页面下的内容盒子如何中断，如果多列布局没有内容盒子，这个属性会被忽略。

 

值	描述
auto	默认。如果必要则在元素内部插入分页符。
avoid	避免在元素内部插入分页符。

这个看教程上还有几个属性，我试了几个，感觉没啥变化，他那个简介。。能力有限，看不下去了。。。

有兴趣的自己可以看一下：break-inside 属性值

就是让div不割开使用的，不加的话，如开始的那个图，会把第一列填满之后，多余的半截到第二列，那个div4就上半边在一列，下半边在二列，

这个有的浏览器不兼容，可在属性前边加上浏览器标识

 

界面有点low，加点背景，边框阴影啥的，就漂亮的，emmm，自己慢慢加去吧。。

 

需要注意一下：

父级div设置高度后，需要计算一下里面子div的高度，超出父高度后，最后一个子div块就不显示了，