zoukankan      html  css  js  c++  java
  • 原生瀑布流

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>无标题文档</title>
     6 <style>
     7 *{margin:0;padding:0;list-style:none}
     8 #box{666px;overflow:hidden; margin:0 auto;}
     9 #box ul{200px;float:left;margin:10px;}
    10 #box ul li{200px; margin-bottom:10px;}
    11 </style>
    12 <script>
    13 function rnd(n,m){
    14     return parseInt(Math.random()*(m-n)+n);    
    15 }
    16 function creatLi(){
    17         var oLi=document.createElement('li');
    18         oLi.style.height=rnd(150,350)+'px';
    19         oLi.style.background='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';        
    20         return oLi;
    21 }
    22 window.onload=function(){
    23 var oBox=document.getElementById('box');
    24 var aUl=oBox.children;
    25 function creat20(){
    26     var n=20;
    27     for(var i=0;i<n;i++){
    28         var oLi=creatLi();
    29         var arr=[];
    30         for(var j=0;j<aUl.length;j++){
    31             arr.push(aUl[j]);
    32         }
    33         arr.sort(function(n1,n2){
    34             return n1.offsetHeight-n2.offsetHeight;        
    35         });    
    36         arr[0].appendChild(oLi);    
    37     }
    38             
    39 }
    40     creat20();
    41     window.onresize=window.onscroll=function(){
    42         var ch=document.documentElement.clientHeight;
    43         var st=document.documentElement.scrollTop  ||  document.body.scrollTop;
    44         var sh=oBox.scrollHeight;
    45         if(sh<=(ch+st)){
    46             creat20();    
    47         }
    48             
    49     };
    50 };
    51 </script>
    52 </head>
    53 
    54 <body>
    55 <div id="box">
    56     <ul></ul>
    57     <ul></ul>
    58     <ul></ul>
    59 </div>
    60 </body>
    61 </html>
  • 相关阅读:
    极大似然估计
    python模块的安装
    变异检测
    泰勒公式
    shell关于变量的操作
    Hadoop安装教程
    关于连接linux被拒
    靶向药
    层次聚类
    基因芯片原理
  • 原文地址:https://www.cnblogs.com/lixuekui/p/5804917.html
Copyright © 2011-2022 走看看