先上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上，一个瀑布流布局的页面就出来了。
这样的排序算法看起来很美好，可真正结合异步加载数据应用到页面里还要解决以下几个问题
评论