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 width: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>
