html5中文学习网

您的位置: 首页 > 网站及特效实例 > html5实验 » 正文

多动手多动脑,html5瀑布流

[ ] 已经帮助:人解决问题

找了好多瀑布流的方法,今天也自己弄了一个自适应的瀑布流可以支持手机浏览,方便 大家一起讨论n3uHTML5中文学习网 - HTML5先行者学习网

演示地址:http://www.html5cn.com.cn/pubuliu.htmln3uHTML5中文学习网 - HTML5先行者学习网

 n3uHTML5中文学习网 - HTML5先行者学习网

首先说下瀑布流的排序算法,参考demo1,思路非常简单,我们把瀑布流拆成三个部分来看:容器、列、格子n3uHTML5中文学习网 - HTML5先行者学习网

n3uHTML5中文学习网 - HTML5先行者学习网

1.先计算当前屏幕最多能容纳几列瀑布,其值为 "向下取整(屏幕可见区域宽度/(格子宽度+间距))";n3uHTML5中文学习网 - HTML5先行者学习网

2.为了保证容器的居中,将容器的宽度设置为 列数*(格子宽度+间距) – 间距,这里需要注意的是 当容器的宽度计算出来之后再显示,否则会造成页面宽度的抖动,影响体验。;n3uHTML5中文学习网 - HTML5先行者学习网

3.排序开始,先把前N(N为列数)个格子分别放到每一列中,然后每次寻找高度最小的一列,把格子放进去(left值为列序号*(格子宽度+间距),top值为 列高+间距),并刷新列的高度,遍历所有格子直到所有的格子都被排序。n3uHTML5中文学习网 - HTML5先行者学习网

最后将事件句柄绑定到window.onload和window.onresize上,一个瀑布流布局的页面就出来了。n3uHTML5中文学习网 - HTML5先行者学习网

这样的排序算法看起来很美好,可真正结合异步加载数据应用到页面里还要解决以下几个问题n3uHTML5中文学习网 - HTML5先行者学习网

1.当缩放浏览器窗口时会不断地触发事件,如果每次都响应的话会狂耗性能,需要在缩放动作结束后再执行重排方法。n3uHTML5中文学习网 - HTML5先行者学习网

2.页面滚动到底部请求数据成功之后只对新增的节点重排。n3uHTML5中文学习网 - HTML5先行者学习网

3.如果服务器无法给出图片高度,需要在图片加载完毕之后再进行重排。n3uHTML5中文学习网 - HTML5先行者学习网

第一个问题我是用setTimeout和clearTimeout来解决的,思路是窗口变化之后开始计时,如果窗口还在变换则从新开始计时,窗口不再变化则延时(很短的时间)触发重排事件。暂时只想到这个,这里应该还有更好的方法。n3uHTML5中文学习网 - HTML5先行者学习网
代码如下n3uHTML5中文学习网 - HTML5先行者学习网

var re;n3uHTML5中文学习网 - HTML5先行者学习网

window.onresize = function() {n3uHTML5中文学习网 - HTML5先行者学习网

clearTimeout(re);n3uHTML5中文学习网 - HTML5先行者学习网

re = setTimeout(resize,100);n3uHTML5中文学习网 - HTML5先行者学习网

};n3uHTML5中文学习网 - HTML5先行者学习网

第二个问题在于如果每次有新的数据加载,都要对整个容器内的节点进行重排,非常消耗性能。解决思路:n3uHTML5中文学习网 - HTML5先行者学习网

1.将列保存在全局数组中,每次重排或者新增格子之后更新数组的数据,这样下次执行排序算法的时候可以直接调用。n3uHTML5中文学习网 - HTML5先行者学习网
2.将新增格子保存在数组中作为参数传递给排序算法,仅对新格子进行遍历和操作。n3uHTML5中文学习网 - HTML5先行者学习网

第三个问题是如果服务器无法给出图片尺寸,那么必须在图片完全加载完毕之后才可进行排序(因为高度是实时获取的,图片不全高度有误差),这里没有什 么好办法,只能遍历图片,每张图片加载成功后执行一个回调函数,将加载成功的图片数量+1,当加载成功的图片数量等于图片总数的时候执行排序方法。缺点是 有一张图片加载不成功就无法看到所有的,真正项目中还是需要在异步加载数据的时候获取图片尺寸。n3uHTML5中文学习网 - HTML5先行者学习网

好了,以上就是在这次瀑布流实现过程中遇到的问题和解决方法,由一开始加载3-4屏就卡死到现在可以无限加载(ff,chrome),深感优化js的必要性和无限性。一点小心得写在这里权当抛砖引玉,大家对瀑布流实现的优化有什么见解欢迎一起交流讨论。n3uHTML5中文学习网 - HTML5先行者学习网

PS:一点视觉上的优化,如果服务器可以给出图片尺寸的话,返回的json字符串应该是按照高度从高到低排序的,这样可以使瀑布流底部尽量持平(感谢书生的指点)。n3uHTML5中文学习网 - HTML5先行者学习网

每天付出一点点,日后成功一大步n3uHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助