window.onload=function(){

            waterFall('main','box');

        }

        function waterFall(parent,box){

//将main下的所有box类取出来

            var oParent=document.getElementById(parent);

            var num=getByClass(oParent,box);

            console.log(num.length);

//计算整个页面显示的列数（页面宽/box的宽）

            var oBoxW=num[0].offsetWidth;

            console.log(oBoxW);

 //对算出来的值取整

            var cols=Math.floor(document.documentElement.clientWidth/oBoxW);

//设置main的宽度

            oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto;';

//存放每一列的高度

            var harr=[];

            for(var i=0;i<num.length;i++){

                if(i<cols){

                    harr.push(num[i].offsetHeight);

                }else{

                //求数组中的最小值

                    var minh=Math.min.apply(null,harr); //求每一列图片的最小高度

                    var index=getMinhIndex(harr,minh);

                    num[i].style.position='absolute';

                    num[i].style.top=minh+'px';

//num[i].style.left=oBoxW*index+'px';

                    num[i].style.left=num[index].offsetLeft+'px';

                    harr[index]+=num[i].offsetHeight;

                }

            }

            console.log(harr);        }

        //根据class获取元素

        function getByClass(parent,clsName){

            var oBox=new Array(); //用来存取获取到的class为box的类

            var oElements=document.getElementsByTagName('*');

            for(var i=0; i<oElements.length;i++){

                if(oElements[i].className==clsName){

                    oBox.push(oElements[i]);//把一个值加入到数组当中

                }

            };

            return oBox;

        }

        function getMinhIndex(arr,minh){

            for(var i in arr){

                if(arr[i]==minh){

                    return i;

                }

            }

        }