随着读图时代的到来,页面使用瀑布流布局越来越流行。那么,瀑布流有那些实现方式呢?
1 绝对定位,计算每个块的位置
这是最常用的一种方式,他需要计算每一块的宽度和高度,动态的将块布局到页面上。它优势是可以对不同宽度块可以进行很好的布局。劣势是需要进行大量的计算,来确定块的布局。可以参见百度图片。
2 float布局
这是最简单最有效的一种方式。他需要确定列的数目,然后根据列的高度把块添加到列中。他的优势是简单,计算少。他的劣势是不能对不同宽度的块进行好的适应。
3 多列css
这是完全css的布局,使用column-count, column-gap, column-rule等属性。column-count可以指定列数,column-gap指定列之间的距离。他的优势简单易用。劣势是当总的块的数量不是列的整数倍时,最后一个块会被拆分到不同的列中,影响美观度。