卓新智趣技术大咖分享绝对排序如何实现瀑布流方式

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

先上Demo

瀑布流排序 :

瀑布流+无限拖

首先说下瀑布流的排序算法，参考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.将列保存在全局数组中，每次重排或者新增格子之后更新数组的数据，这样下次执行排序算法的时候可以直接调用。

第三个问题是如果服务器无法给出图片尺寸，那么必须在图片完全加载完毕之后才可进行排序(因为高度是实时获取的，图片不全高度有误差)，这里没有什么好办法，只能遍历图片，每张图片加载成功后执%

声明：本文仅为传递更多网络信息，不代表站长之家观点和意见，仅供参考了解，更不能作为投资使用依据。

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!