瀑布流式布局性能的五大要点

要点一：
对于瀑布流式图片布局性能起决定性作用的是img标签必须指定height(width在瀑布流式布局中一般是固定的)：

网页的加载顺序是dom会优先加载完成，然后加载远程文件包括图片。绝对定位方式在dom加载完成后会进行计算，然而此时如果没有为img标签指定width与height，会等到图片加载完成浏览器才会渲染出整个元素的高度。所以在dom加载完成之后计算的元素高度是不正确的，确切的说是没有图片的高度的。

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

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

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

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

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