找到了很多瀑布流的方法，今天也做了一个自适应的瀑布流来支持手机浏览，方便大家一起讨论

演示地址：http://www.html5cn.com.cn/pubuliu.html

首先说一下瀑布流的排名算法。参考demo1，思路很简单。我们将瀑布流分成三部分：容器、列和网格

1.首先计算当前屏幕可以容纳的更大瀑布数，其值为“向下舍入(屏幕可视区域的宽度/(网格宽度间距))”；

2.为了保持容器居中，将容器的宽度设置为列数*(网格宽度间距)-间距。这里需要注意的是，容器的宽度会在计算后显示，否则会导致页面宽度抖动，影响体验。

3.排序开始时，先在每列中放入前N个(N为列数)网格，然后每次寻找高度最小的列，放入网格(左边值为列序号*(网格宽度间距)，顶端值为列高间距)，刷新列高，遍历所有网格，直到所有网格排序完毕。

最后，将事件处理程序绑定到window.onload和window.onresize，会出来一个瀑布流布局的页面。

这种排序算法看起来很漂亮，可以结合异步加载数据应用到页面上，应该解决以下问题

1.浏览器窗口缩放时会不断触发事件，如果每次都有响应，会消耗性能，所以缩放动作完成后需要执行重排方法。

2.页面滚动到底部并成功请求数据后，仅重新排列新添加的节点。

3.如果服务器不能给出图片的高度，需要在加载后重新排列图片。

个问题通过setTimeout和clearTimeout解决。想法是在窗口改变后开始计时，如果窗口仍在改变则再次开始计时，如果窗口没有改变则延迟(短时间)触发重排事件。我暂时只考虑这个。这里应该有更好的办法。

代码如下

var re

window.onresize=function() {

cleartime out(re)；

re=setTimeout(resize，100)；

};

第二个问题是，如果每次都加载新数据，那么整个容器中的节点就会被重新排列，这样会消耗很多性能。解决方案：

1.保存全局数组中的列，每次重新排列或添加网格后更新数组的数据，以便下次可以直接调用排序算法。

2.将新网格保存在数组中作为参数传递给排序算法，只遍历和操作新网格。

第三个问题是，如果服务器不能给出图片大小，必须在图片完全加载后进行排序(因为高度是实时获取的，不完整的高度有误差)。没有好的方法遍历图片。每张图片加载成功后，会执行一个回调函数，成功加载的图片数为1。当成功加载的图片数量等于图片总数时，将执行排序方法。缺点是如果一张图片加载不成功，就看不到全部。在实际项目中，异步加载数据时，仍然需要获取图片大小。

好了，以上是瀑布流实现中遇到的问题和解决方法。从开始加载3-4屏就卡了，现在可以无限加载(ff，chrome)。我深深感受到了优化js的必要性和无限性。注意，写在这里。欢迎大家就瀑布流量的优化交换和讨论意见。

PS:是一点视觉优化。如果服务器可以给出图片大小，那么返回的json字符串应该按照高度从高到低排序，这样瀑布流的底部就可以尽可能的平坦