H5edu教育Html5开发为您解答:
1、传统的多列浮动
实现方式
· 各列固定宽度,并且左浮动;
· 一列中的数据块为一组,列中的每块依次排列;
· 更多数据加载时,需要分别插入到不同的列中;
优点:
· 布局简单;
· 不用明确数据块的高度,自适应即可。
缺点:
· 列数固定,嵌套较多
· 滚动加载更多数据时,需要指定插入到第几列中,不方便。
2、CSS3样式定义法
我们将要用到的是CSS3新加的column属性,通过指定容器的列个数column-count,列间距column-gap,列中间的边框(间隔边线)column-rule,列宽度column-width实现。
优点:
· 直接用CSS定义,方便快捷,是最好不过了;
· 扩展方便。
缺点:
· 目前仍有部分浏览器不支持CSS3;
· CSS3这种方式的数据排列是从上到下排列到一定高度后,再把剩余元素依次添加到下一列;
3、绝对定位
可谓是最优的一种方案,方便添加数据内容,窗口变化,列数/数据块都会自动调整;
缺点:
需要实现知道数据块高度,如果其中包含图片,需要知道图片高度;
JS 动态计算数据块位置,当窗口缩放频繁,可能会狂耗性能。
出现横向滚动条??????????直接float不就可以了?