瀑布流研究

0.前言

   以前看过瀑布流,但是没有自己动手写代码,最近偶然又看到了,那索性就自己动手写写代码。

   瀑布流的实现方式大致上有三种:固定列数的浮动布局、自适应的绝对定位布局、css3的多列布局,下面就分别描述。

1.固定列数的浮动布局

  该方法比较简单:计算出高度最小的那一列,然后

2.绝对定位

  思考:1.计算可以当前页面的列数;

    2.用一个数组记录各个列的高度;

    3.把新的数据添加到最短列上,然后更新类的高度。

   遇到的问题:

   1.页面的性能问题:当缩放浏览器窗口时会不断触发resize事件,如果每次都相应的话,会很耗性能,因此需要缩放动作结束后再执行重排方法。使用setTimeout和clearTimeout来实现。

    2.获取图片高度,通过服务器获取,也可以通过请求头来获取。

    3.排序问题,通过使用一个数组来保存新添加的数据,只对新添加的数据进行排序 

 

参考: 参考1   参考2  参考3  参考4  参考5

posted @ 2013-07-30 17:30  沙漠孤鹰1140  阅读(169)  评论(0编辑  收藏  举报