瀑布流的简单实现

最新推荐文章于 2024-08-14 20:33:16 发布

lee_xudong

最新推荐文章于 2024-08-14 20:33:16 发布

阅读量462

点赞数

分类专栏： js 文章标签： js onscroll

本文链接：https://blog.csdn.net/lee_xudong/article/details/53196654

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    *{margin:0;padding:0;}
    div{width:900px;border:1px solid red;margin:0 auto;overflow:hidden;}
    ul{width:250px;border:1px solid #000;float:left;margin:24px;}
    li{list-style:none;border:1px solid red;margin:5px;}
</style>
<script>
window.onload = function()
{
    var aTmp = document.getElementsByTagName('ul')
    var aUl = [];
    //定义一个变量来限制瀑布流的长度
    var bFlag = 0;
    //把每个ul依次放入数组，为后边的根据长度给ul排序
    for(var i = 0; i<aTmp.length; i++){
        aUl.push(aTmp[i]);
    }
    //获取可视区的高
    var clientHeight = document.documentElement.clientHeight;
    window.onscroll = function()
    {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        var scrollHeight = document.body.scrollHeight;
        //当滚动的距离加上可视区的高大于或等于最大滚动距离时再次调动创建li函数
        if(scrollTop + clientHeight >= scrollHeight){
            //当调用createli函数的次数哦大于等于5时结束程序运行
            if(bFlag>=5){
                return false;
            }
            createLi();
        }
    }

    createLi();
    function createLi()
    {
        bFlag++;
        alert(bFlag)
        for(var i = 0; i<30;i++){
            var oLi = document.createElement('li');
            var oH = rand(200,300);
            oLi.style.height = oH+'px';
            oLi.innerHTML = i;
            oLi.style.fontSize = '40px';
            oLi.style.lineHeight = oH+'px';
            oLi.style.textAlign = 'center';
            //避免某个ul插入过长，所以循环插入,运用数组排序的方法
            aUl.sort(function(aUl1,aUl2){
                return aUl1.offsetHeight - aUl2.offsetHeight;
            })
            aUl[0].appendChild(oLi);
        }
    }



    function rand(m,n)
    {
        return parseInt(Math.random()*(m-n+1)+n);
    }
}
</script>
</head>

<body>
    <div>
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>
</body>
</html>