js实现 瀑布流

在这里插入代码片@TOC

css
var{
	width:200px;
	background:#ccc;
	position:absolute;
}

createDiv()
    function createDiv(){
        for(var i=0; i<20;i++){
            var aDiv=document.createElement("div");
            var divH=Math.floor(Math.random()*300+50);
                aDiv.style.height=divH+"px";
                body.appendChild(aDiv);
        }
        change()
    }
    function change(){
        //获取窗口宽度
        var windowW = document.documentElement.clientWidth;
        //计算一行能放多少盒子 取整 用窗口整个宽度除以盒子的宽度+边距
        var n = Math.floor(windowW/210);
        //获得盒子公用的左右边距
        var center = (windowW - n*210)/2;
        //把div获取过去
        var div = document.getElementsByTagName("div");
        //声明一个空数组来 为了保存每次累加盒子的高度
        var arrh = [];
        for(var i=0; i<div.length;i++){
            //因为n是不固定的  所以不能是数值 拿到 为了保存第一排的高度
            var j=i%n;
            //计算第二行的top值和left值
            if(arrh.length==n){
            //最低的盒子下标
            var min=minIndex(arrh);
            //给最低的盒子重新定一个新盒子的top值
            div[i].style.top = arrh[min]+10+"px";
            //相同  定一个left  根据循环找出最低下标的元素 *210是为得出当最低盒子的left值
            div[i].style.left = center+210*min+"px";
            //因为top值不可能是固定的所以 要+=  因为当前最低的地方加了新盒子所以 top值再变 要记录下来所以要+=  为了求出最低盒子加新盒子的总高度；
            arrh[min]+=div[i].offsetHeight+10;//要加上10px的边距
            }else{
            //保存第一排的高度
                arrh[j]=div[i].offsetHeight;
            //赋予给第一排的top值
                div[j].style.top=0;
            //赋予第一排的left值  *J是因为n是个定值
                div[j].style.left=center+j*210+"px";
            }
        }
    }
    window.onscroll=function(){
    //获取可见区域的高度
        var widowH=document.documentElement.clientHeight;
      //获取当前页面的滚动条纵坐标位置
        var scrollH=document.documentElement.scrollTop||document.body.scrollTop;
        //获取元素内容的总高度
        var documentH=document.documentElement.scrollHeight||document.body.scrollHeight;
        if(widowH+scrollH>documentH-20){
            createDiv()
        }
    }
    //自适应
    window.onresize=function(){
        change()
    }
    //算出 数组中最矮元素的下标
    function minIndex(arr){
        var m=0;
        for(var i=0;i<arr.length;i++){
            m=Math.min(arr[m],arr[i])==arr[m]?m:i
        };
        return m        
    }