你的位置:首页 > Java教程

[Java教程]瀑布流思路布局


 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>