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

2019年02月03日 来源:

先上Demo

瀑布流排序 : ://nlei./demos/publ/ml

瀑布流+无限拖 ://nlei./demos/publ/ml

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

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

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

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

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

将事件句柄绑定到load和resize上,一个瀑布流布局的页面就出来了。

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

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

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

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

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

代码如下

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

1.将列保存在全局数组中,每次重排或者新增格子之后更新数组的数据,这样下次执行排序算法的时候可以直接调用。

2.将新增格子保存在数组中作为参数传递给排序算法,仅对新格子进行遍历和操作。

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

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

东莞市金属烟盒厂家
活性纳米碳酸钙
四川烤鱼烧烤培训
相关文章
  • 叉烧的做法
    叉烧的做法

    叉烧的做法没有用叉烧酱,没有用烤箱,煎出来的效果也不差,次做,很有成就感难度:切墩(初级) 时间:1小时以上主料猪肉500g辅料蒜蓉适量生抽适量油适量白糖适量蜜汁鸡酱适量姜蓉适量蚝油适量胡椒粉适量老抽适量酒适量 叉烧的做法步骤1. 把...

  • 严防猪流感入境禁止墨美猪及其产品入境
    严防猪流感入境禁止墨美猪及其产品入境

    本报讯(陈飞)国家质检总局和农业部4月26日联合发布公告,禁止邮寄或旅客携带来自墨西哥、美国的猪及其产品进境,一经发现,一律作退回或销毁处理。在途经我国或在我国停留的国际航行船舶、飞机和火车等运输工具上,如发现有来自墨西哥、美国的猪及其产...

  • 金融股低迷保险股全线下跌
    金融股低迷保险股全线下跌

    今日金融股全线低迷。银行股普跌,截至发稿,兴业银行跌逾2%,南京银行、交通银行、华夏银行等多股跌逾1%。点击查看>>>银行板块 保险板块 券商板块今日金融股全线低迷。银行股普跌,截至发稿,兴业银行跌逾2%,南京银行、交通银行、华夏银行等多股跌逾1%。券...

  • 秋季养生的4道药膳菜式
    秋季养生的4道药膳菜式

    秋季到来,由于气温乍寒乍热,人的抵抗力变弱,伤风感冒等疾病容易侵袭人体,所以,秋季应更加注重保健养生。下面介绍秋季养生的4道食疗菜式,助你秋季养生一臂之力。1、生地粥配方:生地黄25克,大米75克,白糖少许。做法:生地黄(鲜品洗净细切后,用适...

  • 漳州官九线南方花园路段不足百米七拦路石墩
    漳州官九线南方花园路段不足百米七拦路石墩

    闽南9月26日讯 短短不到百米的道路上,出现7个约50厘米高的石墩(如图),这样危险的路段就在官九线(省道207线)南方花园路段。不少市民拨打海都漳州通反映这一问题,希望尽快将“拦路虎”移除。邦邦在现场看到,这些石墩大部分由两三块石头堆砌而成,被灌...

  • 斩断非法删帖的需求源头纵横延边新闻网报道
    斩断非法删帖的需求源头纵横延边新闻网报道

    一面是有偿删帖,一面是络水军,利用非正常手段满足一己私利与诉求的非法络应用,已成为一大络公害,与互联精神背道而驰络时代,背后大有玄机。近日有媒体披露,删一条帖子能挣上千元,一天可获利数万元……目前全国删帖产业规模达数以亿元计!删帖竟然...