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{width:840px;margin:0 auto;}  
  11.     .flow{float:left;width: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=\"width: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=\"width: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>  


 

posted @ 2014-09-29 08:56  super1234  阅读(541)  评论(0)  编辑  收藏  举报