瀑布流思路布局

 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>