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.最重要的 ...

随机推荐

接口测试的一些FAQ
近期在学习接口测试,总会有很多问题,故把前任给的经验做个记录下. 1,测试一条delete接口,delete请求后要检验什么内容: 原来删除有分为:物理删除,删除资源,删除关系,软删除一般delet ...
minilzo使用流程
/* testmini.c -- very simple test program for the miniLZO library This file is part of the LZO real- ...
Kohana重写接收不到get参数问题
.htaccess,不需要重启apache # Turn on URL rewriting RewriteEngine On # Installation directory RewriteBase ...
【gym102222K】Vertex Covers（高维前缀和，meet in the middle）
题意:给定一张n点m边的图,点带点权,定义点覆盖的权值为点权之积,问所有点覆盖的权值之和膜q n<=36, 1<=a[i]<=1e9,1e8<=q<=1e9 思路:n&l ...
abc136
第一次打ABC 题目简单,但我菜 E - Max GCD 可以任选两个数,一个减去1,一个加上1,可以操作$0,\cdots,K$次,求操作后数组最大GCD 枚举数组之和的因子,试图找到符合题意的最大 ...
The JavaScript this Keyword
https://www.w3schools.com/js/js_this.asp What is this? The JavaScript this keyword refers to the obj ...
centos 6.8 安装 WebVirtMgr
1.kvm虚拟机已经用 virsh命令装好了 2. WebVirtMgr的安装步骤完全参照此处: https://github.com/retspen/webvirtmgr/wiki/Install- ...
Linux添加目录到环境变量以及添加Sublime Text到环境变量
本文主要介绍了Linux添加目录到环境变量以及添加Sublime Text到环境变量,通过具体的解释说明,让我们从中学到Linux添加目录到环境变量以及添加Sublime Text到环境变量的精髓所在 ...
day52—JavaScript拖拽事件的应用（自定义滚动条）
转行学开发,代码100天——2018-05-07 前面的记录里展示了JavaScript中鼠标拖拽功能,今天利用拖拽功能实现另一个应用场景——自定义滚动条(作为控制器)的用法. 常通过自定义滚动条控制 ...
Sqlserver 中间表的操作
去除列名重复 select rtrim(ltrim(a.Bank)) as Country, count(*) as Total from T_BASE_OWNER a left join T_BAS ...

jQuery淡入淡出瀑布流效果

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

随机推荐

热门专题