HTML+CSS07 瀑布流布局

预备知识：Column布局

CSS Columns（多列布局）是一种定义了多栏布局的模块，它能够表现出将内容在列之间怎么流动的以及间隙和分割线怎么使用。浏览器的兼容性还是不错的，生产环境建议-moz和-webkit前缀以及不加前缀三种形式共同使用

columns

CSS多列布局可以轻松的实现多列的瀑布流布局，它的两个关键属性是column-count和cloumn-width

column-count设置多列布局得的列数，取值：

• auto，由其他CSS属性来决定列的数量，比如column-width
• <number>，用来描述元素内容被划分的列数，如果column-width也设置为非零值，此参数仅表示所允许的最大列数

column-width用来设定最佳列宽，取值：

• auto，由其他CSS属性来决定列的数量，比如column-count
• <length>，用来描述最理想的列宽，实际列宽可能更宽（用来填充可用空间）也可能更窄（当可用空间比指明的列宽更窄），如果column-width也设置为非零值，此参数仅表示所允许的最大列数

因为这两个属性值没有重叠，可以使用columns来进行简写：

column-count: 5       →     columns: 5
column-width: 200px   →     columns: 200px
↓
columns:  5 200px

高度

一般来说，多列布局的高度是由浏览器自动确定的，但是也可以通过设置height或者max-height来限制列的高度。这样在生成新的一列之前都会仅允许增加到这个高度，剩下的内容会放置到下一列中。（这样会令我们的设置的column-count失效）

未设置高度：

设置最大高度后，列数超出了设置的column-count: 4：