懂你所需,做你所想
当前位置: 仙桃云科 > 新闻资讯 > 技术指导 >

jquery实现简单瀑布流代码

发表日期:2014-09-29文章编辑:仙桃云科网络科技有限公司

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


  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
如没特殊注明,文章均为仙桃云科网络原创,转载请注明来自>
相关新闻

Java6和Java8在Windows上共存...

最近在做一个Android的项目,一开始安装的是Java8用于项目的开发。但是在项目后期需要用到drozer用于检测项目的安全性,要搭建drozer的测试环境必须要使用Java6,否则会出...

日期:2017-08-30

OpenGL与CUDA互操作方式总结...

一、介绍 CUDA是Nvidia推出的一个通用GPU计算平台,对于提升并行任务的效率非常有帮助。本人主管的项目中采用了OpenGL做图像渲染,但是在数据处理方面比较慢,导致帧率一直...

日期:2017-08-18

nodejs-基础与深入...

01-nodejs介绍 1.什么是nodejs 1. (javascript跑在机器端,服务端)Javascript on the machine 2. (跑在谷歌v8引擎上)A runtime for Google Chrome s V8 Javascript eng...

日期:2017-08-07

InnoDB关键特性之刷新邻接页-异...

Flush neighbor page 1、工作原理 2、参数控制 AIO 1、开启异步IO 一、刷新邻接页功能 1、工作原理 当刷新一个脏页时,innodb存储引擎会检测该页所在区(extent)的所有页,...

日期:2017-07-31

Java8 Stream代码详解+BenchMark...

1、基本介绍 1、创建方式 1、Array的Stream创建 1、直接创建 // main Stream stream = Stream. of ( a , b , c );String [] strArray = new String[] { a , b , c };stream...

日期:2017-07-24

Java 数据类型在实际开发中应用...

在实际编程中,往往存在着这样的数据集,它们的数值在程序中是稳定的,而且数据集中的元素是有限的。在JDK1.5之前,人们用接口来描述这一种数据类型。 1.5以后引入枚举 一...

日期:2017-07-17