简化版瀑布流

转载 (原文地址) mo.lm 随笔 待整理 302阅读 2014-08-21 22:40:06 举报

[code]<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>

  • { margin: 0; padding: 0;}
    .box{width: 1000px; overflow: hidden; margin: 20px auto 0;}
    .box ul{ float: left; width: 180px; margin: 0 10px 10px; box-sizing: border-box; overflow: hidden; border: 1px solid #CCC;}
    .box ul li{width: 160px; overflow: hidden; margin: 10px auto; background: gray;}
    </style>
    <script>
    function getPos(obj){
    var t = 0;
    var l = 0;

    while(obj){
    t+= obj.offsetTop;
    l+= obj.offsetLeft;
    obj = obj.offsetParent;
    };

    return {top:t, left:l};
    };
    function createLi(){
    var oLi = document.createElement('li');
    oLi.style.height = parseInt(Math.random()400+100)+'px';
    oLi.style.background = 'rgb('+parseInt(Math.random()
    256)+','+parseInt(Math.random()256)+','+parseInt(Math.random()256)+')';
    return oLi;
    };

window.onload=function(){
var aUl = document.getElementsByTagName('ul');
var arr = [];

function aLi20(){
    for(var i=0; i<20; i++){
        var aLi = createLi();

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

        arr.sort(function(ul1, ul2){
            return ul1.offsetHeight - ul2.offsetHeight;
        });

        arr[0].appendChild(aLi);
    };
};

aLi20();

window.onscroll=function(){
    var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollBottom = scrollT+document.documentElement.clientHeight;

    if(scrollBottom >= document.body.scrollHeight-500){
        aLi20();    
    };
};

};
</script>
</head>

<body>
<div class="box" id="box">
<ul></ul><ul></ul><ul></ul><ul></ul><ul></ul>
</div>
</body>
</html>[/code]代码片段 1

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复