瀑布流js排列

var _px = document.getElementById("px");
var con=document.getElementById("content");
px.onclick=function(){
    
    
    /*定义需要用到的变量*/
    var fli=document.getElementById("ful").getElementsByTagName("li");
    var fli_left=[],fli_top=[],fli_height=[],_index=4;
    var a=0,b=0;c=0;
    
    /*排列第一排的位置*/
    for(i=0;i<_index;i++){
        fli[i].style.left=i*240+20+"px";
        
        /*将相关参数写入数组*/
        fli_left.push(fli[i].offsetLeft);
        fli_top.push(fli[i].offsetTop)
        fli_height.push(fli[i].offsetHeight)
        }

    
    var _size=fli.length-_index;/*算出剩余需要循环次数*/
    
    for(r=0;r<_size;r++){
        
    /*定初始判断参照值*/
    a=fli_left[0];
    b=fli_height[0]
    c=0;
    
    /*循环判断出数组中最小的*/
    for(i=1;i<5;i++){
        if(b>fli_height[i]){
            b=fli_height[i];
            a=fli_left[i];
            c=i;        
            }
        }
    
    /*排列最新的位置*/
    fli[_index].style.left=a+"px";
    fli[_index].style.top=b+10+"px";
    
    /*从数组中删除最小的值*/
    fli_height.splice(c,1);        
    fli_left.splice(c,1);
    
    /*把最新的位置参数写入数组*/
    var bb=fli[_index].offsetHeight+fli[_index].offsetTop;
    console.log(bb)
    fli_height.push(bb);
    fli_left.push(fli[_index].offsetLeft);
    console.log(fli[_index].offsetHeight)
    console.log(fli[_index].offsetTop)

    _index++;
    
    }

}

 

转载于:https://www.cnblogs.com/masterccc/p/5191681.html