瀑布流布局的三种实现方式

随着读图时代的到来，页面使用瀑布流布局越来越流行。那么，瀑布流有那些实现方式呢？

1 绝对定位，计算每个块的位置

这是最常用的一种方式，他需要计算每一块的宽度和高度，动态的将块布局到页面上。它优势是可以对不同宽度块可以进行很好的布局。劣势是需要进行大量的计算，来确定块的布局。可以参见百度图片。

2 float布局

这是最简单最有效的一种方式。他需要确定列的数目，然后根据列的高度把块添加到列中。他的优势是简单，计算少。他的劣势是不能对不同宽度的块进行好的适应。

3 多列css

这是完全css的布局，使用column-count, column-gap, column-rule等属性。column-count可以指定列数，column-gap指定列之间的距离。他的优势简单易用。劣势是当总的块的数量不是列的整数倍时，最后一个块会被拆分到不同的列中，影响美观度。