浅谈瀑布流网页设计中遇到的问题和解决方法

跟着pinterest的走红，瀑布流式的布局被越来越多的网站所运用，这种布局确实有很多好处，图片列表页有很强壮的视觉感染力，并且还提高了用户“发现好图”的功率。瀑布流的实现有很多种办法，今天我们主要讨论一下肯定排序来实现瀑布流的办法 即 Pinterest 选用的办法。

首先说下瀑布流的排序算法，思路十分简略，我们把瀑布流拆成三个部分来看：容器、列、格子

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的必要性和无限性。