zoukankan      html  css  js  c++  java

  • jquery实现简单瀑布流代码

    测试环境：ie8 ff13.0.1  chrome22

    可以将分页获取的内容依次填入四个div中，瀑布流的分页可以以多页（比如5页）为单位二次分页，这样可以减少后台算法的复杂度

    [html] view plaincopy
     
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    3. <html>  
    4. <head>  
    5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
    6. <title>waterfall flow</title>  
    7. <script type="text/javascript" src="../jquery-1.8.0.min.js" /></script>  
    8. <style type="text/css" >  
    9.     body{margin:0px;}  
    10.     #main{840px;margin:0 auto;}  
    11.     .flow{float:left;200px;margin:5px;background:#ABC;}  
    12. </style>  
    13. <script type="text/javascript" >  
    14.     $(document).ready(function(){  
    15.         // 初始化内容  
    16.         for(var i = 0 ; i < 3 ; i++){  
    17.             $(".flow").each(function(){  
    18.                 $(this).append("<div style="90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;"></div>");  
    19.             });  
    20.         }  
    21.           
    22.         $(window).scroll(function(){  
    23.             // 被卷去的高度  
    24.             var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;  
    25.             // 页面高度  
    26.             var pageHeight = $(document).height();  
    27.             // 可视区域高度  
    28.             var viewHeight = $(window).height();  
    29.             //alert(viewHeight);  
    30.             //当滚动到底部时  
    31.             if((scrollTop+viewHeight)>(pageHeight-20)){  
    32.                 if(scrollTop<1000){//防止无限制的增长  
    33.                     for(var i = 0 ; i < 2 ; i++){  
    34.                         $(".flow").each(function(){  
    35.                             $(this).append("<div style="90%;height:"+getRandom(200,300)+"px;margin:5px auto;background:#159;"></div>");  
    36.                         });  
    37.                     }  
    38.                 }  
    39.             }  
    40.         });  
    41.     });  
    42.         /*  
    43.     * 获取指定范围随机数  
    44.     * @param min，最小取值  
    45.     * @param max，最大取值  
    46.     */  
    47.       
    48.     function getRandom(min,max){  
    49.         //x上限，y下限   
    50.         var x = max;   
    51.         var y = min;   
    52.         if(x<y){  
    53.             x=min;  
    54.             y=max;  
    55.         }  
    56.         var rand = parseInt(Math.random() * (x - y + 1) + y);  
    57.         return rand;  
    58.     }  
    59.   
    60. </script>  
    61. </head>  
    62. <body>  
    63. <div id="main">  
    64.     <div class="flow" ></div>  
    65.     <div class="flow" ></div>  
    66.     <div class="flow" ></div>  
    67.     <div class="flow" ></div>  
    68. </div>  
    69. </body>  
    70. </html>  


     
  • 相关阅读:
    【Luogu1095】守望者的逃离
    python基础学习1-类相关内置函数
    python基础学习1-面向对象
    python基础学习1 -异常捕获
    python基础学习1-类，对象
    python基础学习1-正则表达式
    python基础学习1-反射
    python基础学习1-日志信息
    python基础学习1-生成器，递归函数
    python基础学习1-json，pickle的序列化和反序列化
  • 原文地址：https://www.cnblogs.com/xiaochao12345/p/3997646.html
Copyright © 2011-2022 走看看