javascript滝の流れのレイアウト

<div id="waterfall">
    <div class="mod-box">
        <div class="mod-img">...</div>
    </div>
    <div class="mod-box">
        <div class="mod-img">...</div>
    </div>
    <div class="mod-box">
        <div class="mod-img">...</div>
    </div>
</div>

*{margin:0;padding: 0}
#waterfall{position: relative;}
.mod-box{
    padding: 15px 0 0 15px;
    float: left;
}
.mod-img{
    padding: 9px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
    position: relative;
}
.mod-img img{
    width: 310px;
    height: auto;
}

window.onload = function(){
     waterFall("waterfall","mod-box");
}
window.onscroll = scroll;

window.onresize = function() {
    if(re)clearTimeout(re);
    var re = setTimeout(function() {
    waterFall("waterfall","mod-box");
     }, 200);
}
var dataInit = {
    "data": [
        {
            "src": "5.jpg"
        },
        {
            "src": "6.jpg"
        }
     ]
   };

/**
 *         
 */
function scroll(){
 var flag =  checkScroll("waterfall","mod-box");
 if(flag ){
     var oparent = document.getElementById("waterfall");
     var htmlStr = "";
     var len = dataInit.data.length;
     for(var i=0;i<len;i++){
         htmlStr+="";  //       
     }
      oparent.innerHTML+=htmlStr;
      waterFall("waterfall","mod-box");  //      
 }
}

/**
 *      
 * @param parentID    id
 * @param clsName     className
 */
function waterFall(parentID,clsName){
    var oParent = document.getElementById(parentID); //     
    // content   class mod-box      
    var oBoxs = getObjsByClassName(oParent,clsName);//       clsName   oBoxs
    var oBoxWidth = oBoxs[0].offsetWidth;    //obox   ==>310+9*2+2+15 = 345(        )       
    var pageWidth = document.documentElement.clientWidth;  //      
    //var pageWidth = document.documentElement.offsetWidth;  //      
    var cols = Math.floor(pageWidth/oBoxWidth);  //           （   /obox  ）       mod-box  

    var hAarr = [];  //                  。
    var minH;      
    var minHIndex;       //          
    for(var i = 0;i<oBoxs.length;i++){//    aPin       
        oBoxs[i].style.position="absolute";
        if(i<cols){  //       ，            hAarr
            hAarr.push(oBoxs[i].offsetHeight);

            oBoxs[i].style.top=0+"px";
            oBoxs[i].style.left=oBoxWidth*i+"px";
        }else{
            minH = Math.min.apply(null,hAarr); //  hAarr     minH
            minHIndex = getMinhIndex(hAarr,minH);

            oBoxs[i].style.top=minH+"px";
           // oBoxs[i].style.left=oBoxWidth*minHIndex+"px";
            oBoxs[i].style.left= oBoxs[minHIndex].offsetLeft+"px";
            //           +     aPin[i]   
           hAarr[minHIndex]+=oBoxs[i].offsetHeight; //           
        }
    }
    var maxH = Math.max.apply(null,hAarr);
    oParent.style.cssText = "width:"+oBoxWidth*cols+"px;margin:0 auto;height:"+maxH+"px;"; //        ：  +       
}

/**
 *           （       oBox）
 * @param parentID    id
 * @param clsName     className
 * @returns {boolean}
 */
function checkScroll(parentID,clsName){
    var  parentObj = typeof parentID=="object" ?parentID:document.getElementById(parentID);
    var oBoxs = getObjsByClassName(parentObj,clsName);
    var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
    //  【        waterfall()】   ：             +      (           )
    var scrolltop = document.body.scrollTop ||document.documentElement.scrollTop;
    //         
    var height = document.documentElement.clientHeight; //    
    return (lastBoxH<scrolltop+height)?true:false;
}

/**
 *   class    
 * @param id
 * @param clsName
 * @returns {Array}
 */
function getObjsByClassName(parentID,clsName){
    var  parentObj = typeof parentID=="object" ?parentID:document.getElementById(parentID);
    if(!parentObj){
        return;
    }
    var childObjs = parentObj.getElementsByTagName("*"); //          
    var calssObjs = []; //              
    for(var i in childObjs){//     、    、    
        if(childObjs[i].className==clsName){ 
            calssObjs.push(childObjs[i]);
        }
    }
    return calssObjs;
}
/**
 *         minIndex
 * @param arr
 * @param minH
 * @returns {string}
 */
function getMinhIndex(arr,minH){
    for(var i in arr){
        if(arr[i]===minH){
            return i;
        }
    }
}