瀑布流效果实现

shangpudxd
shangpudxd 发布于 2017-03-09 23:34:09 浏览:2171 类型:原创 - 随笔 分类:JavaScript - JS效果 二维码: 作者原创 版权保护
当滚动条接近底部会自动生成新的内容(色块)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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>
z
给个赞 15 人点赞
收藏 42 人收藏
评论 已有 5 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
shangpudxd
shangpudxd2017-03-15 15:31:285F
这个sort方法是接受一个函数,根据函数得到的返回值正负进行排序 //@士力架:我问下arr.sort(n,m)在哪里传的值?
举报 支持 (0) 回复 (0)
士力架
士力架2017-03-15 11:20:184F
我问下arr.sort(n,m)在哪里传的值?
举报 支持 (0) 回复 (1)
535101351
5351013512017-03-14 17:56:533F
赞个!
举报 支持 (0) 回复 (0)
shangpudxd
shangpudxd2017-03-14 16:35:242F
尽管拿~ //@士力架:可以拿去学习吗?你一定会很爽快的说拿去把
举报 支持 (0) 回复 (0)
士力架
士力架2017-03-14 16:18:591F
可以拿去学习吗?你一定会很爽快的说拿去把
举报 支持 (0) 回复 (1)
shangpudxd shangpudxd 作者

git ID:shangpudxd

作者最新