瀑布流 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }

        .list{
            width: 1000px;
            margin: 30px auto;
        }

        .list ul{
            float: left;
            width: 320px;
        }

        .list .c{
            margin: 0 20px;
        }
        .list li{
            margin-bottom: 10px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="list clearfix" id="list">
        <ul></ul>
        <ul class="c"></ul>
        <ul></ul>
    </div>
    <script type="text/javascript">
        var oList=document.getElementById('list');
        var aUl=oList.getElementsByTagName('ul');
        var now=1;
        var arr=[];

        function creatEle(){
            var oLi=document.createElement('li');
            oLi.style.height=parseInt(Math.random()*250+70)+'px';
            var r=parseInt(Math.random()*255),
                g=parseInt(Math.random()*255),
                b=parseInt(Math.random()*255);
                oLi.style.backgroundColor='rgb('+r+','+g+','+b+')';
                oLi.innerHTML=now+'是件大事看几点睡的深刻的解释道';
                now++

                for(var i=0; i<aUl.length; i++){
                    arr[i]=aUl[i];
                }

                arr.sort(function(a,b){
                    return a.offsetHeight-b.offsetHeight;
                })
                arr[0].appendChild(oLi);
        }

        for(var i=0;i<10;i++){
            creatEle();
        }

        window.onscroll=function(){
            var st=document.documentElement.scrollTop||document.body.scrollTop;
            var ch=document.documentElement.clientHeight;

            if(arr[0].offsetHeight <st+ch+200){
                for(var i=0;i<10;i++){
                    creatEle();    
                }

            }
        }

    </script>
</body>
</html>

 

posted @ 2017-05-11 15:17  Jinsuo  阅读(134)  评论(0)    收藏  举报