js实现瀑布流

<script type="text/javascript">

window.onload = function(){
    pubuliu("ulwrap",4,299);
};

//实现ul下的li瀑布流
//cols 表示一行几列，liWidth 表示一列的宽度
function pubuliu(ulId,cols,liWidth){
    var wrap = document.getElementById(ulId);
    var lis = wrap.getElementsByTagName("li");
    
    var li_h = [];
    for(var i=0; i<lis.length; i++){
        if(i < cols){
            //设置最小高度，存入li_h数组
            li_h[i] = lis[i].scrollHeight+10;
            //定位元素
            lis[i].style.left = i * liWidth + "px";
            lis[i].style.top = "0px";
        }else{
            //获取数组最小值
            var min_liH = Math.min.apply( Math, li_h);
            var key = getKeyByValue(li_h,min_liH);
            //重定义最小高度
            li_h[key] = min_liH + lis[i].scrollHeight+10;
            
            //定位元素
            lis[i].style.left = key * liWidth + "px";
            lis[i].style.top = min_liH + "px";
        }
    }
}

//根据数组中的值获取索引
function getKeyByValue(arr,value){
    for(var i=0; i<arr.length; i++){
        if(arr[i] == value){
            return i;
        }
    }
}
</script>

 首先设置几行，固定宽度，高度自适应，通过js实现li标签的绝对定位。

js方法理解：先判断一共多少个li，当地i个li小于4列的时候，把他们向下浮动的高度保存到li_h[]的数组里【1,2,3,4用于判断绝对位置的left】，小于4的时候，设置绝对高度，当大于4的时候，再放第五个li标签的时候，先判断li_h[]中的数组中最小的一个数组高度，然后用getKeyByValue（）方法，返回最小高度的位置，在重新定义当前数组的高度的时候，加上10，是li的padding的和，每次改变的时候，都需要加padding的值。

<style>
ul.wrap{
    width:1190px;
    margin:0 auto;
    position:absolute; /* 相对定位 */
}
ul.wrap li{
    
    float:left;
    position:absolute; /* 绝对定位 */
}
/*ul.wrap li img{*/
    /* 计算好长度 */
    /*width:265px;*/
    /*border:2px solid #bdbdbd;*/
    /*padding:10px;*/
    /*margin:4px;*/
/*}*/
</style>

 

转载于:https://www.cnblogs.com/mu-zi/p/6306080.html