瀑布流布局基本思路

主要思路如下
1.计算页面的宽度,计算出页面可放数据块的列数。
2.将各个数据块的高度尺寸记入数组中
3.用绝对定位先将页面第一行填满,因为第一行的top位置都是一样的,然后用数组记录每一列的总高度。
4.继续用绝对定位将其他数据块定位在最短的一列的位置之后然后更新该列的高度。
5.当浏览器窗口大小改变时,重新执行一次上面1-4步以重新排放(列数随页面宽度而改变,因而需要重新排放)。
6.滚动条滚动到底部时加载新的数据进来后也是定位在最短的一列的位置之后然后更新该列的高度。

预览:
https://jirengu-inc.github.io/jrg-renwu8/homework/%E5%BC%A0%E8%BD%A9/renwu30.html
源码:




    
    renwu30
    
    


    

你可能感兴趣的:(瀑布流布局基本思路)