原生瀑布流

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;list-style:none}
#box{width:666px;overflow:hidden; margin:0 auto;}
#box ul{width:200px;float:left;margin:10px;}
#box ul li{width:200px; margin-bottom:10px;}
</style>
<script>
function rnd(n,m){
    return parseInt(Math.random()*(m-n)+n);    
}
function creatLi(){
        var oLi=document.createElement('li');
        oLi.style.height=rnd(150,350)+'px';
        oLi.style.background='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';        
        return oLi;
}
window.onload=function(){
var oBox=document.getElementById('box');
var aUl=oBox.children;
function creat20(){
    var n=20;
    for(var i=0;i<n;i++){
        var oLi=creatLi();
        var arr=[];
        for(var j=0;j<aUl.length;j++){
            arr.push(aUl[j]);
        }
        arr.sort(function(n1,n2){
            return n1.offsetHeight-n2.offsetHeight;        
        });    
        arr[0].appendChild(oLi);    
    }
            
}
    creat20();
    window.onresize=window.onscroll=function(){
        var ch=document.documentElement.clientHeight;
        var st=document.documentElement.scrollTop  ||  document.body.scrollTop;
        var sh=oBox.scrollHeight;
        if(sh<=(ch+st)){
            creat20();    
        }
            
    };
};
</script>
</head>

<body>
<div id="box">
    <ul></ul>
    <ul></ul>
    <ul></ul>
</div>
</body>
</html>