先上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的需要性和无限性。一点小心得写在这里权当抛砖引玉，巨匠对瀑布流实现的优化有什么看法接待一路交流谈判。