jQuery淡入淡出瀑布流效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery淡入淡出瀑布流效果</title>

    <style>

        @charset "utf-8";

        *{ margin:0; padding:0;}

        body { font:12px/1.5 Arial; color:#666; background:#EDEDED;}

        ul,li{ list-style:none;}

        a{ color:#666; text-decoration:none;}

        a:hover{ text-decoration:none; color:#000;}

        img{border:0 none;}

        #waterfall{ text-align:center; width:1000px; margin:0 auto;}

        #waterfall img{ width:203px;}

        #waterfall .cell{ padding:10px 0px 5px 0px; width:223px;border:1px solid #E3E3E3; background:#fff; margin-top:20px;box-shadow: 0px 2px 3px 1px #ccc;}

        #waterfall .cell:hover{box-shadow: 0px 2px 3px 1px #999;}

    </style>

<script src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script>

<script>

;(function($){

   var

   //参数

   setting={

      column_width:240,//列宽

      column_className:'waterfall_column',//列的类名

      column_space:10,//列间距

      cell_selector:'.cell',//要排列的砖块的选择器，context为整个外部容器

      img_selector:'img',//要加载的图片的选择器

      auto_imgHeight:true,//是否需要自动计算图片的高度

      fadein:true,//是否渐显载入

      fadein_speed:600,//渐显速率，单位毫秒

      insert_type:1, //单元格插入方式，1为插入最短那列，2为按序轮流插入

      getResource:function(index){ }  //获取动态资源函数,必须返回一个砖块元素集合,传入参数为加载的次数

   },

   //

   waterfall=$.waterfall={},//对外信息对象

   $waterfall=null;//容器

   waterfall.load_index=0, //加载次数

   $.fn.extend({

       waterfall:function(opt){

          opt=opt||{};

          setting=$.extend(setting,opt);

          $waterfall=waterfall.$waterfall=$(this);

          waterfall.$columns=creatColumn();

          render($(this).find(setting.cell_selector).detach(),false); //重排已存在元素时强制不渐显

          waterfall._scrollTimer2=null;

          $(window).bind('scroll',function(){

             clearTimeout(waterfall._scrollTimer2);

             waterfall._scrollTimer2=setTimeout(onScroll,300);

          });

          waterfall._scrollTimer3=null;

          $(window).bind('resize',function(){

             clearTimeout(waterfall._scrollTimer3);

             waterfall._scrollTimer3=setTimeout(onResize,300);

          });

       }

   });

   function creatColumn(){//创建列

      waterfall.column_num=calculateColumns();//列数

      //循环创建列

      var html='';

      for(var i=0;i<waterfall.column_num;i++){

         html+='<div class="'+setting.column_className+'" style="width:'+setting.column_width+'px; display:inline-block; *display:inline;zoom:1; margin-left:'+setting.column_space/2+'px;
margin-right:'+setting.column_space/2+'px; vertical-align:top; overflow:hidden"></div>';

      }

      $waterfall.prepend(html);//插入列

      return $('.'+setting.column_className,$waterfall);//列集合

   }

   function calculateColumns(){//计算需要的列数

      var num=Math.floor(($waterfall.innerWidth())/(setting.column_width+setting.column_space));

      if(num<1){ num=1; } //保证至少有一列

      return num;

   }

   function render(elements,fadein){//渲染元素

      if(!$(elements).length) return;//没有元素

      var $columns = waterfall.$columns;

      $(elements).each(function(i){

          if(!setting.auto_imgHeight||setting.insert_type==2){//如果给出了图片高度，或者是按顺序插入，则不必等图片加载完就能计算列的高度了

             if(setting.insert_type==1){

                insert($(elements).eq(i),setting.fadein&&fadein);//插入元素

             }else if(setting.insert_type==2){

                insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素

             }

             return true;//continue

          }

          if($(this)[0].nodeName.toLowerCase()=='img'||$(this).find(setting.img_selector).length>0){//本身是图片或含有图片

              var image=new Image;

              var src=$(this)[0].nodeName.toLowerCase()=='img'?$(this).attr('src'):$(this).find(setting.img_selector).attr('src');

              image.onload=function(){//图片加载后才能自动计算出尺寸

                  image.onreadystatechange=null;

                  if(setting.insert_type==1){

                     insert($(elements).eq(i),setting.fadein&&fadein);//插入元素

                  }else if(setting.insert_type==2){

                     insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素

                  }

                  image=null;

              }

              image.onreadystatechange=function(){//处理IE等浏览器的缓存问题：图片缓存后不会再触发onload事件

                  if(image.readyState == "complete"){

                     image.onload=null;

                     if(setting.insert_type==1){

                        insert($(elements).eq(i),setting.fadein&&fadein);//插入元素

                     }else if(setting.insert_type==2){

                        insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素

                     }

                     image=null;

                  }

              }

              image.src=src;

          }else{//不用考虑图片加载

              if(setting.insert_type==1){

                 insert($(elements).eq(i),setting.fadein&&fadein);//插入元素

              }else if(setting.insert_type==2){

                 insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素

              }

          }

      });

   }

   function public_render(elems){//ajax得到元素的渲染接口

         render(elems,true);

   }

   function insert($element,fadein){//把元素插入最短列

      if(fadein){//渐显

         $element.css('opacity',0).appendTo(waterfall.$columns.eq(calculateLowest())).fadeTo(setting.fadein_speed,1);

      }else{//不渐显

         $element.appendTo(waterfall.$columns.eq(calculateLowest()));

      }

   }

   function insert2($element,i,fadein){//按序轮流插入元素

      if(fadein){//渐显

         $element.css('opacity',0).appendTo(waterfall.$columns.eq(i%waterfall.column_num)).fadeTo(setting.fadein_speed,1);

      }else{//不渐显

         $element.appendTo(waterfall.$columns.eq(i%waterfall.column_num));

      }

   }

   function calculateLowest(){//计算最短的那列的索引

      var min=waterfall.$columns.eq(0).outerHeight(),min_key=0;

      waterfall.$columns.each(function(i){

         if($(this).outerHeight()<min){

            min=$(this).outerHeight();

            min_key=i;

         }

      });

      return min_key;

   }

   function getElements(){//获取资源

      $.waterfall.load_index++;

      return setting.getResource($.waterfall.load_index,public_render);

   }

   waterfall._scrollTimer=null;//延迟滚动加载计时器

   function onScroll(){//滚动加载

      clearTimeout(waterfall._scrollTimer);

      waterfall._scrollTimer=setTimeout(function(){

          var $lowest_column=waterfall.$columns.eq(calculateLowest());//最短列

          var bottom=$lowest_column.offset().top+$lowest_column.outerHeight();//最短列底部距离浏览器窗口顶部的距离

          var scrollTop=document.documentElement.scrollTop||document.body.scrollTop||0;//滚动条距离

          var windowHeight=document.documentElement.clientHeight||document.body.clientHeight||0;//窗口高度

          if(scrollTop>=bottom-windowHeight){

             render(getElements(),true);

          }

      },100);

   }

   function onResize(){//窗口缩放时重新排列

      if(calculateColumns()==waterfall.column_num) return; //列数未改变，不需要重排

      var $cells=waterfall.$waterfall.find(setting.cell_selector);

      waterfall.$columns.remove();

      waterfall.$columns=creatColumn();

      render($cells,false); //重排已有元素时强制不渐显

   }

})(jQuery);

</script>

</head>

<body>

<div id="waterfall">

    <div class="cell"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_1.jpg" /></a><p><a href="javascript:void(0)">图片</a></p></div>

    <div class="cell"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_2.jpg" /></a><p><a href="javascript:void(0)">图片</a></p></div>

    <div class="cell"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_3.jpg" /></a><p><a href="javascript:void(0)">图片</a></p></div>

    <div class="cell"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_4.jpg" /></a><p><a href="javascript:void(0)">图片</a></p></div>

    <div class="cell"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_6.jpg" /></a><p><a href="javascript:void(0)">图片</a></p></div>

    <div class="cell"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_7.jpg" /></a><p><a href="javascript:void(0)">图片</a></p></div>

    <div class="cell"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_8.jpg" /></a><p><a href="javascript:void(0)">图片</a></p></div>

    <div class="cell"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_9.jpg" /></a><p><a href="javascript:void(0)">图片</a></p></div>

    <div class="cell"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_10.jpg" /></a><p><a href="javascript:void(0)">图片</a></p></div>

    <div class="cell"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_11.jpg" /></a><p><a href="javascript:void(0)">图片</a></p></div>

    <div class="cell"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_12.jpg" /></a><p><a href="javascript:void(0)">图片</a></p></div>

    <div class="cell"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_1.jpg" /></a><p><a href="javascript:void(0)">图片</a></p></div>

    <div class="cell"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_13.jpg" /></a><p><a href="javascript:void(0)">图片</a></p></div>

    <div class="cell"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_14.jpg" /></a><p><a href="javascript:void(0)">图片</a></p></div>

    <div class="cell"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_8.jpg" /></a><p><a href="javascript:void(0)">图片</a></p></div>

    <div class="cell"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_5.jpg" /></a><p><a href="javascript:void(0)">图片</a></p></div>

    <div class="cell"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_6.jpg" /></a><p><a href="javascript:void(0)">图片</a></p></div>

    <div class="cell"><a href="#"><img src="http://images.cnblogs.com/cnblogs_com/heyiming/947284/t_12.jpg" /></a><p><a href="javascript:void(0)">图片</a></p></div>

</div>

<script>

var opt={

  getResource:function(index,render){//index为已加载次数,render为渲染接口函数,接受一个dom集合或jquery对象作为参数。通过ajax等异步方法得到的数据可以传入该接口进行渲染，如 render(elem)

      if(index>=7) index=index%7+1;

      var html='';

      for(var i=20*(index-1);i<20*(index-1)+20;i++){

         var k='';

         for(var ii=0;ii<3-i.toString().length;ii++){

            k+='0';

         }

         k+=i;

         var src="http://cued.xunlei.com/demos/publ/img/P_"+k+".jpg";

         html+='<div class="cell"><a href="#"><img src="'+src+'" /></a><p>'+k+'</p></div>';

      }

      return $(html);

  },

  auto_imgHeight:true,

  insert_type:1

}

$('#waterfall').waterfall(opt);

</script>

</body>

</html>

jQuery淡入淡出瀑布流效果的更多相关文章

jQuery实现的瀑布流效果，向下滚动即时加载内容
下拉滚动条或鼠标滚轮滚动到页面底部时, 动态即时加载新内容. 后台用 json 传输数据, 示例程序中只写了示例数组.数据也只设置了两个属性, 需根据实际应用改写. 页面用了 ul li 做为容器 ...
用jQuery实现瀑布流效果学习笔记
jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...
【前端】用jQuery实现瀑布流效果
jQuery实现瀑布流效果何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...
jQuery动态网格瀑布流插件Masonry
Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...
jQuery淡入淡出轮播图实现
大家好我是只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...
jQuery无限载入瀑布流【转载】
转载至 http://wuyuans.com/2013/08/jquery-masonry-infinite-scroll/ jQuery无限载入瀑布流好久没更新日志了,一来我比较懒,二来最近也比较 ...
RecylerView完美实现瀑布流效果
RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...
使用JS实现图片展示瀑布流效果
不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...
WPF下制作的简单瀑布流效果
最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...

随机推荐

【BZOJ3601】一个人的数论
题目链接题意简述求小于 n 且与 n 互质的数的 k 次方之和. Sol 要求的东西: \[\sum_{i=1}^n i^k [gcd(i,n)=1]\] 枚举 gcd 上个莫比乌斯函数: \[\ ...
B1011. A+B 和 C
题目描述给定区间[-2^63, 2^63]内的三个整数A.B 和 C,请判断A+B是否大于C 输入格式第一行给出正整数T(≤10),即测试用例的个数.随后给出T组测试用例,每组占一行,顺序给出A. ...
使用Spring.Net进行Webservice开发&发布遇到的问题
发布遇到的问题1: HTTP 错误 404.17 - Not Found 请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理. 最终解决时IIS的设置情况: 1.应用程序池的高级设置中启用32 ...
关于反射和动态代理和AOP
package Exercise.reflect; /** * 反射把java中所有的东西都当做对象,甚至是类的本身也作为一种对象,并把它作为Class的对象的实例: * 反射是把类.类的属性.方法都 ...
linux运维、架构之路-MySQL(二)
一.SQL语句实战 1.DDL语句——库管理 ①查看数据库 show databases; show databases like 'word%';#模糊查询数据库 ②创建数据库 create dat ...
Spring——简介
学习网站: [1]http://spring.io/ [2]http://projects.spring.io/spring-framework/ Spring是为解决企业应用开发的复杂性而创建的,是 ...
win php composer安装
composer安装文件下载 https://getcomposer.org/Composer-Setup.exe composer安装: 选择php.exe D:\phpStudy\php55n\p ...
Oracle--利用监听器日志监控访问该数据库的客户端IP
服务器10.10.10.168 数据库seineebs 客户端 10.10.10.14 用户guipeng.zhang 查看监听器状态: 在本机利用PL/SQL工具连接该数据库查看监听器日志:一 ...
《Vue前端开发手册》
序言为了统一前端的技术栈问题,技术开发二部规定开发技术必须以Vue为主. 为了更好的规范公司的前端框架,现以我前端架构师为主,编写以下开发规范,如有不当的地方,欢迎批评教育并慢慢改善该开发文档,谢谢 ...
SpringMVC开发手册
title: SpringMvc -- 开发手册 date: 2018-11-15 22:14:22 tags: SpringMvc categories: SpringMvc #分类名 type: ...

jQuery淡入淡出瀑布流效果

jQuery淡入淡出瀑布流效果的更多相关文章

随机推荐

热门专题