基于浮动的移动端两列可延时加载的瀑布流布局

由于工作需要需要写一个移动端可以延时加载的瀑布流布局页面，于是开始查资料，百度，对瀑布流有了一些理解，一直以来都有写博客的想法，于是有了这篇博文！

几点说明
1.本文所说的瀑布流指的是等宽不等高的瀑布流
2.本问纯属记录用，笔者水平有限，如有错误欢迎指正
3.本文使用的方法可以使用图片延时加载而不会影响瀑布流效果

延时加载瀑布流实现的主要问题
主要的问题在于延时与图片高度计算的冲突，延时加载完成前后图片的高度是会发生变化的，瀑布流函数计算的每列高度不一定准确，定位会出现问题。笔者先尝试过使用绝对定位实现瀑布流布局，但是因为延时加载问题，出来的效果并不是很理想，也尝试过使用onload事件来触发瀑布流函数，但是不知道具体什么原因定位还是不准确。所以为了尽快完成工作任务，使用了本文的这个方式，思想基本相同，只是定位元素位置的方式是使用浮动。因此也局限了瀑布流的列数只能是两列，应对移动端应该是够用了。

瀑布流的几种实现方式
1.绝对定位实现，通过JS计算每一列的高度，然后通过绝对定位来实现每个元素位置的排列以实现瀑布流的形式。
2.将屏幕分成等宽的若干列，每一列都是一个容器，通过计算每个容器的高度，将元素放在高度最低的容器中。
3.使用CSS3的多列布局，这个方法个人认为实现起来比较简单，但是有一个问题，重新加载的内容是页面右侧，而不是在页面下方。想要用这种方法的去百度一下CSS3实现瀑布流网上有很多实例。

本文实现的代码
JS代码如下:

function water(){
            var arrBox=$('#content').children('.box');// box对象
            var arrBoxH=[];//数组，用于存储左侧列中的所有块框相加的高度
            var arrBoxR=[];//数组，用于存储右侧列中的所有块框相加的高度
            for(var i=0;i<arrBox.length;i++){      //遍历box
                var boxH=arrBox.eq(i).innerHeight(); //获得box的高度
                if(i==0){
                    arrBox.eq(i).addClass("left"); //第一行中的第一个块box添加左浮动（left是自己写好的有float:left属性的选择器名）
                    arrBoxH[i]=boxH; //第一行中的第一个块box 先添加进数组arrBoxH
                }else if(i==1){
                    arrBox.eq(i).addClass("right");//第一行中的第一个块box添加右浮动
                    arrBoxR[i]=boxH; //第一行中的第二个个块box 先添加进数组arrBoxR
                }else{
                    var leftNum = arrBoxH.reduce(function (x, y) {
                        return x + y;
                    });//计算左侧列的高度
                    var rightNum = arrBoxR.reduce(function (x, y) {
                        return x + y;
                    });//计算右侧列的高度
                    if(leftNum > rightNum) //比较两侧高度大小，决定为该box添加左浮动还是右浮动
                    {
                        arrBox.eq(i).removeClass();
                        arrBox.e