加载中 ...
首页 > 运营 > 交互 > 正文

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

2019-04-27 11:07:29 来源:

先上Demo

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

瀑布流+无穷拖 http://cued.xunlei.com/demos/publ/demo2.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的需要性和无穷性。一点谨慎得写在这里权当抛砖引玉,年夜家对瀑布流实现的优化有甚么看法接待一路交换会商。

作者:xwei

文章来历:迅雷CUED

“广域创业网”的新闻页面文章、图片、音频、视频等稿件均为自媒体人、第三方机构发布或转载。如稿件涉及版权等问题,请与

我们联系删除或处理,客服邮箱,稿件内容仅为传递更多信息之目的,不代表本网观点,亦不代表本网站赞同

其观点或证实其内容的真实性。