【转】关于WaterFall瀑布流式布局的性能优化

市面上已存在的瀑布流式布局的网站：
拼范网：http://www.pinfun.com/
迷尚网：http://www.mishang.com/
凡客达人：http://star.vancl.com/
美丽说：http://www.meilishuo.com/
蘑菇街：http://www.mogujie.com/welcome/
淘宝哇哦：http://wow.taobao.com/
IDsoo：http://idsoo.com/
Topit：http://topit.me/
Mark之：http://markzhi.com/
布兜：http://www.budou.me/
堆糖：http://www.duitang.com/
花瓣：http://huaban.com/
码图网：http://www.markpic.com/popular/
新鲜网：http://www.xinxian.com/
易惊喜：http://www.ejingxi.com/

这两年瀑布流式布局已小有规模，对于浏览器性能问题是个挑战。
瀑布流目前已知有三种实现方式，[我喜欢]采用的是绝对定位的方式进行瀑布流计算。总结一下性能中注意的几点：

要点一：
对于瀑布流式图片布局性能起决定性作用的是img标签必须指定height(width在瀑布流式布局中一般是固定的)：
网页的加载顺序是dom会优先加载完成，然后加载远程文件包括图片。绝对定位方式在dom加载完成后会进行计算，然而此时如果没有为img标签指定width与height，会等到图片加载完成浏览器才会渲染出整个元素的高度。所以在dom加载完成之后计算的元素高度是不正确的，确切的说是没有图片的高度的。

要点二：
Ajax动态插入瀑布元素

当通过ajax获取到新数据之后如何追加到当前瀑布流中呢？
起初为了性能优化打算轮循把元素插入到页面各列中，但是页面中的图片高度是不定的，很容易出现高度很高的图片，会留有很不和谐的多余空白，可兼容性差。
最后采用的第二步方案，实时获取元素底部最高的元素轮循插入。即上图中的第2列优先获得插入元素的权利，完成插入后再计算底部最高的元素。
这时就需要性能优化，我们不能每次都动态去取每个元素底部的高度，可以把六个列的值放在一个数组中，依次记录着每列的最后元素的底部高度。再进行对比计算，算出最小高度进行插入。
PS：为性能优化，插入动态数据时轮循的是动态要加入的元素，而非整个页面的所有元素。

要点三：
Dom元素相关的数据重复计算？
当页面Dom加载完成后，获取瀑布流父元素的宽度，根据元素的宽度和间距，计算出有几列，各列绝对定位的left值等…这些数据都要缓存在内存变量中。不是每次执行瀑布流操作都去动态获取计算的。

要点四：
删除中瀑布流中的元素，如何重新排列？
此次版本中删除某个瀑布流元素后，是重新排列页面中所有的元素，虽然封装的方法很简便，但是这样是不够优化的。
后期计划，删除某列中的某个元素， 此列被删除元素下面的元素重新计算排列，减少性能消耗，达到优化。

要点五：
关于改变窗口大小，动态排列
在改变窗口大小的过程，由于onresize在IE多个版本下会有多次触发，每触发一次，瀑布就会重新排列一次，重复执行浪费了性能。
因此在onresize事件中添加延迟优化处理

此版本还有许多细节及优化没有来得及时间处理，后期我们会跟进。希望大家喜欢这个项目，有什么意见请联系我们。
随后我们会将优化QWrap的这个WaterFall扩展组件，提供给QWrap用户使用，丰富组件。

在此感谢QWrap库开发者们的辛勤付出，让开发者有了更多的选择，节省了开发时间，达到敏捷开发。

 

—–20120224更新-添加删除瀑布流元素整列重新排序（↑要点四）———————————————————————————————-
使用方法见Demo可组件js文件，由于没有指定图片高度，所以瀑布流事件是在页面完全加载之后触发的。

Demo地址：http://www.im9527.com/archives/8