1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 ul{ 12 300px; 13 margin:0 15px; 14 border:1px solid #ccc; 15 float:left; 16 } 17 li{ 18 list-style:none; 19 margin:10px 0; 20 } 21 </style> 22 <script> 23 function toRandom(n,m){ 24 return parseInt(Math.random()*(m-n)+n); 25 } 26 function getLi(obj){ 27 var oLi=document.createElement('li'); 28 29 oLi.style.height=toRandom(100,400)+'px'; 30 oLi.style.background='rgb('+toRandom(0,256)+','+toRandom(0,256)+','+toRandom(0,256)+')'; 31 32 return oLi; 33 } 34 window.onload=function(){ 35 var aUl=document.getElementsByTagName('ul'); 36 var arr=[]; 37 38 function getLi20(){ 39 40 for(var i=0;i<20;i++){ 41 var oLi=getLi(); 42 for(j=0;j<aUl.length;j++){ 43 arr.push(aUl[i]); 44 } 45 46 arr.sort(function(aUl1,aUl2){ 47 return aUl1.offsetHeight-aUl2.offsetHeight; 48 }); 49 50 arr[0].appendChild(oLi); 51 } 52 } 53 54 getLi20(); 55 56 window.onscroll=function(){ 57 var oS=document.documentElement.scrollTop || document.body.scrollTop; 58 var oC=document.documentElement.clientHeight; 59 60 if(oS+oC>=document.documentElement.offsetHeight){ 61 getLi20(); 62 } 63 }; 64 }; 65 </script> 66 </head> 67 68 <body> 69 <ul></ul> 70 <ul></ul> 71 <ul></ul> 72 <ul></ul> 73 </body> 74 </html>