1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 *{margin:0;padding:0;list-style:none} 8 #box{666px;overflow:hidden; margin:0 auto;} 9 #box ul{200px;float:left;margin:10px;} 10 #box ul li{200px; margin-bottom:10px;} 11 </style> 12 <script> 13 function rnd(n,m){ 14 return parseInt(Math.random()*(m-n)+n); 15 } 16 function creatLi(){ 17 var oLi=document.createElement('li'); 18 oLi.style.height=rnd(150,350)+'px'; 19 oLi.style.background='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')'; 20 return oLi; 21 } 22 window.onload=function(){ 23 var oBox=document.getElementById('box'); 24 var aUl=oBox.children; 25 function creat20(){ 26 var n=20; 27 for(var i=0;i<n;i++){ 28 var oLi=creatLi(); 29 var arr=[]; 30 for(var j=0;j<aUl.length;j++){ 31 arr.push(aUl[j]); 32 } 33 arr.sort(function(n1,n2){ 34 return n1.offsetHeight-n2.offsetHeight; 35 }); 36 arr[0].appendChild(oLi); 37 } 38 39 } 40 creat20(); 41 window.onresize=window.onscroll=function(){ 42 var ch=document.documentElement.clientHeight; 43 var st=document.documentElement.scrollTop || document.body.scrollTop; 44 var sh=oBox.scrollHeight; 45 if(sh<=(ch+st)){ 46 creat20(); 47 } 48 49 }; 50 }; 51 </script> 52 </head> 53 54 <body> 55 <div id="box"> 56 <ul></ul> 57 <ul></ul> 58 <ul></ul> 59 </div> 60 </body> 61 </html>