瀑布流研究

0.前言

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

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

1.固定列数的浮动布局

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

2.绝对定位

  思考：1.计算可以当前页面的列数；

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

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

   遇到的问题：

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

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

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

 

参考： 参考1   参考2  参考3  参考4  参考5

转载于:https://www.cnblogs.com/shamoguying1140/p/3225641.html