• 瀑布流思路布局


     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>
  • 相关阅读:
    Codeforces Round #380(div 2)
    Codeforces Round #378(div 2)
    Codeforces Round #379(div 2)
    CCPC2016合肥现场赛
    CCPC2016沈阳站
    HDU2222 Keywords Search__AC自动机
    poj2185Milking Grid
    POJ2961_kmp
    POJ 2406
    poj 2752Seek the Name, Seek the Fame
  • 原文地址:https://www.cnblogs.com/jasonwang2y60/p/5838433.html
走看看 - 开发者的网上家园