简易瀑布流 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com">
<meta name="copyright" content="智能社 - zhinengshe.com">
<title>智能社 - www.zhinengshe.com</title>
<style>
* { margin:0; padding:0; }
div { width:966px; margin:10px auto; }
ul { float:left; width:300px; margin:0 10px; border:1px solid red; }
li { background:#ccc; list-style:none; margin-bottom:20px; }
</style>
<script>
window.onload=function (){
    var aUl=document.getElementsByTagName('ul');
    var aTmpUl=[];
    for(var i=0;i<aUl.length;i++)
    {
        aTmpUl.push(aUl[i]);
    }
    appendLi();
    function appendLi()
    {
        for(var i=0;i<20;i++)
        {
            var oLi=document.createElement('li');
            oLi.style.height=rnd(100,300)+'px';
            oLi.innerHTML='你吃饭了吗？';
            //比较大小获得高度最小的一个
            aTmpUl.sort(function(ul1,ul2){
                return ul1.offsetHeight-ul2.offsetHeight;
            });
            aTmpUl[0].appendChild(oLi);
        }
    };
    window.onscroll=function()
    {
        var scrollHeigt=document.body.scrollHeight;//获取内容的高度，浏览器不同也有差异
        var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
        var scrllBottom=scrollTop+document.documentElement.clientHeight;
        if(scrllBottom>=scrollHeigt)
        {
            appendLi();
        }
        
    };
    function rnd(n,m)
    {
        return parseInt(Math.random()*(m-n)+n);
    }
    
};

</script>
</head>

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

 

posted @ 2015-03-09 17:37  高尔础础  阅读(149)  评论(0)    收藏  举报