瀑布流效果实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>前端ABC-瀑布流</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>

欢迎分享本文,转载请保留出处:前端ABC » 瀑布流效果实现

赞 (2)
分享到:更多 ()

发表评论 0