前端开发技能瀑布流效果实现

前端开发总监 行业技能|前端开发掌握的技能|web前端开发技能点

当滚动条接近底部会自动生成新的内容(色块)

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发招聘猎聘</title>
    <style>
        * {
            list-style: none;
        }
        div {
            overflow: hidden;
        }
        ul {
            float: left;
        }
        li {
            width: 300px;
            margin-bottom: 10px;
        }
    </style>
    <script>
        function rnd(n, m) {
            return parseInt(Math.random() * (m – n)) + n;
        }
        function cl() {
            var li = document.createElement(‘li’);
            li.style.height = rnd(100, 500) + ‘px’;
            li.style.background = ‘rgb(‘ + rnd(0, 255) + ‘,’ + rnd(0, 255) + ‘,’ + rnd(0, 255) + ‘)’;
            return li;
        }
        window.onload = function () {
            var aUl = document.getElementsByTagName(‘ul’);
            //alert(aUl.length);
            function c20() {
                for (var i = 0; i < 20; i++) {
                    var arr = [];
                    for (var j = 0; j < aUl.length; j++) {
                        arr.push(aUl[j])
                    }
                    arr.sort(function (n, m) {
                        return n.offsetHeight – m.offsetHeight
                    });
                    arr[0].appendChild(cl());
                }
            }
            c20();
            window.onscroll = function () {
                var arr = [];
                for (var j = 0; j < aUl.length; j++) {
                    arr.push(aUl[j])
                }
                arr.sort(function (n, m) {
                    return n.offsetHeight – m.offsetHeight
                });
                var n = (document.body.scrollTop || document.documentElement.scrollTop) + document.documentElement.clientHeight;
                if (n > arr[0].offsetHeight) {
                    c20()
                }
            }
        }
    </script>
</head>
<body>
    <div>
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>
</body>
</html>
前端开发清理缓存插件|搭建web前端开发平台|前端面试移动端开发
» 本文来自:前端开发者 » 《前端开发技能瀑布流效果实现》
» 本文链接地址:https://www.rokub.com/3899.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!