浅谈个人在瀑布流网页的实现中遇到的问题和解决方法

转载 2012年03月31日 09:23:01

先上Demo

瀑布流排序 : http://cued.xunlei.com/demos/publ/demo1.html

瀑布流+无限拖  http://cued.xunlei.com/demos/publ/demo2.html

瀑布流+无限拖 (js获取图片高度版)  http://cued.xunlei.com/demos/publ/demo3.html

随着pinterest的走红,瀑布流式的布局被越来越多的网站所使用,这种布局确实有很多好处,图片列表页有很强大的视觉感染力,而且还提高了用户“发现好图”的效率。瀑布流的实现有很多种方式,之前淘宝UED有篇文章详细的介绍过各种方式的优劣。今天我们主要讨论一下绝对排序来实现瀑布流的方式 即 Pinterest 采用的方式。

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

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

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

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

最后将事件句柄绑定到window.onload和window.onresize上,一个瀑布流布局的页面就出来了。

 

 

这样的排序算法看起来很美好,可真正结合异步加载数据应用到页面里还要解决以下几个问题

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

2.页面滚动到底部请求数据成功之后只对新增的节点重排。

3.如果服务器无法给出图片高度,需要在图片加载完毕之后再进行重排。

 

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

var re;
window.onresize = function() {
    clearTimeout(re);
    re = setTimeout(resize,100);
};

 

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

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

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

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

 

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

PS2:感谢 xiaoqiang 的分享,demo3中使用了通过文件头信息获取尺寸的方法,格子在图片加载完毕之前就可以完成排序,但是那个方法在ie下获取的头信息有些误差,不知道问题出在哪里?望高手指点

PS3:抛砖引玉的目的达到了,这么多人一起思考和讨论,让这个瀑布流越来越快啦~潜水的高手们该出手了




转自:http://cued.xunlei.com/log031

网页瀑布流布局实现方式

什么是瀑布流网页布局? 瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。 下面...
  • u014725878
  • u014725878
  • 2016年09月12日 19:04
  • 677

利用JS实现简单的瀑布流效果

转载自:http://www.cnblogs.com/dyx-wx/p/4642637.html 哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然...
  • u012377333
  • u012377333
  • 2015年07月13日 14:48
  • 1708

js瀑布流实现思路

百度图片以及qq空间等还有一些像蘑菇街 发现啦之类的网站都用的是瀑布流布局模式,这种模式优点就是合理动态布局,使得图片页面表现有很强的视觉感染力,可以使得客户快速发现自己喜欢的图片。 并且大量图片处理...
  • u012545279
  • u012545279
  • 2013年12月16日 14:00
  • 2563

[置顶] RecyclerView实现瀑布流,图片自适应高度

[置顶] RecyclerView实现瀑布流,图片自适应高度 标签: 瀑布流 AndroidStaggered 2016-12-05 15:19 974人阅读 评论(0) 收藏 举报 ...
  • w690333243
  • w690333243
  • 2017年07月05日 15:43
  • 415

JS实现瀑布流

JS实现瀑布流基本结构每一张图片,外层是不可见的box,中间是可见的pic装着img,要求盒子宽度固定。距离控制要使多个盒子间隙相同时,指定向左浮动并且设定box的上左内边距即可,因为box不可见,实...
  • zhu_free
  • zhu_free
  • 2016年03月30日 11:10
  • 1135

RecycleView实现瀑布流的效果

用RecycleView实现了瀑布流的不同效果。
  • ren18678213431
  • ren18678213431
  • 2017年03月15日 17:44
  • 544

【iOS】UITableView实现的瀑布流效果

这段时间看了一些关于瀑布流的文章。有些是使用UICollectionView实现的有些是使用UItableView实现的。两种方法都试验过,最后还是觉得使用UItableView实现的效果要好一些。 ...
  • zhuming3834
  • zhuming3834
  • 2015年10月07日 14:27
  • 2221

jquery实现瀑布流并与php实现数据交互

以前js 实现过一个瀑布流,jquery 也来实现一个 主要思路: 1  先显示出来大概20张图片,使界面出现滚动条  2 设置显示出来图片父id 设置为relative 定位,图片定位方式为floa...
  • buyingfei888
  • buyingfei888
  • 2015年04月03日 17:31
  • 2016

实例解释瀑布流图的实现原理与方法

今天博主上网搜了一下关于瀑布流图的文章,发现实现瀑布流图的方法大概有“通过JS排版”与“通过后台排版”两种。博主认为“通过JS排版”是一种更好的方法,而且网上也是普遍这么认为的。所以博主先简单介绍一下...
  • Sornets
  • Sornets
  • 2015年07月14日 21:01
  • 4969

iOS 瀑布流效果(模仿UITableView重用机制)

瀑布流: 由很多的格子组成,但是每个格子的宽度和高速都是不确定的,是在动态改变的,就像瀑布一样,是一条线一条线的。说明:使用tableView不能实现瀑布流式的布局,因为tableView是以行为单...
  • u013672551
  • u013672551
  • 2015年10月25日 22:49
  • 1039
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:浅谈个人在瀑布流网页的实现中遇到的问题和解决方法
举报原因:
原因补充:

(最多只允许输入30个字)