瀑布流研究
0.前言
以前看过瀑布流,但是没有自己动手写代码,最近偶然又看到了,那索性就自己动手写写代码。
瀑布流的实现方式大致上有三种:固定列数的浮动布局、自适应的绝对定位布局、css3的多列布局,下面就分别描述。
1.固定列数的浮动布局
该方法比较简单:计算出高度最小的那一列,然后
2.绝对定位
思考:1.计算可以当前页面的列数;
2.用一个数组记录各个列的高度;
3.把新的数据添加到最短列上,然后更新类的高度。
遇到的问题:
1.页面的性能问题:当缩放浏览器窗口时会不断触发resize事件,如果每次都相应的话,会很耗性能,因此需要缩放动作结束后再执行重排方法。使用setTimeout和clearTimeout来实现。
2.获取图片高度,通过服务器获取,也可以通过请求头来获取。
3.排序问题,通过使用一个数组来保存新添加的数据,只对新添加的数据进行排序