瀑布流效果的实现

原创 minsong 随笔 jQuery 447阅读 2017-03-02 16:56:43 举报

瀑布流效果的实现
javaScript & jquery完美判断图片是否加载完毕
定义、思路、代码所示、图片展示

瀑布流  ,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。
瀑布流,可以有多列,每一个item(单元格)的高度可以不相同,但是宽度必须一样.排列的方式是,从左往右排列,哪一列现在的总高度最小,就优先排序把item(单元格)放在这一列.这样排完所有的单元格后,可以保证每一列的总高度都相差不大,不至于,有的列很矮,有的列很高.这样就很难看了.
这里主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json。
**实现思路:**
    1. 计算页面的宽度,计算出页面可放数据块的列数
    2. 将各个数据块的高度尺寸记入数组中(需要等所有图片加载完成,否则无法知道图片的高度)
    3. 用绝对定位先将页面第一行填满,因为第一行的top位置都是一样的,然后用数组记录每一列的总高度。
    4. 继续用绝对定位将其他数据块定位在最短的一列的位置之后然后更新该列的高度。
    5. 当浏览器窗口大小改变时,重新执行一次上面1-4步以重新排放
    6. 滚动条滚动到底部时加载新的数据进来后也是定位在最短的一列的位置之后然后更新该列的高度。

页面的基础框架
html 代码

1.计算页面的宽度,计算出页面可放数据块的列数
javascript 代码

2.将各个数据块的高度尺寸记入数组中
javascript 代码

3、用绝对定位先将页面第一行填满,因为第一行的top位置都是一样的,然后用数组记录每一列的总高度。
javascript 代码

4.继续用绝对定位将其他数据块定位在最短的一列的位置之后然后更新该列的高度
javascript 代码

5.当浏览器窗口大小改变时,重新执行一次上面1-4步以重新排放
这里值得注意的便是setTimeout,由于onresize的触发频率非常高,用setTimout设定一个间隔时间可以减低flow方法的执行频率,降低性能损耗。
javascript 代码

6.滚动条滚动到底部时加载新的数据进来后也是定位在最短的一列的位置之后然后更新该列的高度。
javascript 代码

7.所有代码如下所示:
html 代码

json.json的内容:json 代码

效果如图所示:

瀑布流效果的实现
继续加载的条件计算:

瀑布流效果的实现

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复