<!doctype html> <html> <head>     <meta charset="utf-8" />     <title>JQUERY瀑布流--第二版本</title>     <style>         body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin:0; padding:0; }         body{overflow-x: hidden;background-color: #464742}         h1, h2, h3, h4, h5, h6 { font-size:100%;}         img{ border:0}         a{color: #fff;}         #container{ font-size:12px;text-align:center;background-color: #464742;position: relative;border: 10px solid #464742;}         .cell{             padding:10px 10px 0; border:1px solid #31312d; background:#31312d;             width:194px;position: absolute;overflow: hidden;             border-bottom: 30px solid #22221e         }         .cell img{max-width:192px}         .cell h3{color: #fff;text-align: left;margin-top: 10px;}         #container p{line-height:20px; margin-top:5px;color: #fff;text-align: left;margin-bottom: 20px;}     </style>     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>     <script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.4"></script>     <link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.4" media="screen" /> </head> <body> <div id="container">     <div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_000.jpg" /><h3>JQUERY瀑布流原理</h3><p><a href="http://www.sitejs.cn/code/down/jsdmview/waterfall/" target="_blank">http://www.sitejs.cn/code/down/jsdmview/waterfall/</a>这里也有一个瀑布流效果，但效果不好。</p></div>     <div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_001.jpg" /><h3>JQUERY瀑布流原理</h3><p>它的排版原理是先统计多少列，然后生成一排DIV。</p></div>     <div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_002.jpg" /><h3>JQUERY瀑布流原理</h3><p>然后统计这排DIV的高度来分配图片的排版。开始加载感觉不出问题来。如果窗口变化几次排序就会乱了，打乱原有的排序，而且它是直接修改了节点结构，而且很卡甚至卡死。</p></div>     <div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_003.jpg" /><h3>JQUERY瀑布流原理</h3><p>JQUERY瀑布流原理：我们应该保持原有节点不要更改，只修改图片的div坐标位置达到排序功能。</p></div>     <div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_004.jpg" /><h3>JQUERY瀑布流原理</h3><p>JQUERY瀑布流原理：每次排版取前一排最低的位置接着排，窗口改变后先计算一下列数有没有发生变化，变化后才重排。每张图片的位置也比较一下有没有发生变化，变化后才重排，这点对窗口变化后非常有效。</p></div>     <div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_005.jpg" /><h3>JQUERY瀑布流原理</h3><p>JQUERY瀑布流原理：如果图片加载过程中，窗口发生变化，我们是没有执行重排动作。</p></div>     <div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_006.jpg" /><h3>JQUERY瀑布流原理</h3><p>因为重排的条件是必须全部图片已经加载并渲染完毕。所以当加载过程中发生窗口变化，先记录下来，等加载完后再处理。</p></div>     <div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_err.jpg" /><h3>JQUERY瀑布流原理</h3><p>JQUERY瀑布流原理：还有如果图片地址出错将终止排序功能，为了解决这问题我们准备好一张错误提醒图片替换它。</p></div>     <div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_008.jpg" /><h3>JQUERY瀑布流原理</h3><p>JQUERY瀑布流原理：每次排版取前一排最低的位置接着排，窗口改变后先计算一下列数有没有发生变化，变化后才重排。当下拉滚动条达到最后一个DIV的顶部时请求ajax生成新的图片插到底部执行继排功能。</p></div>     <div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_009.jpg" /><h3>JQUERY瀑布流原理</h3><p>JQUERY瀑布流原理：每次排版取前一排最低的位置接着排，窗口改变后先计算一下列数有没有发生变化，变化后才重排。当下拉滚动条达到最后一个DIV的顶部时请求ajax生成新的图片插到底部执行继排功能。</p></div>     <div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_010.jpg" /><h3>JQUERY瀑布流原理</h3><p>JQUERY瀑布流原理：每次排版取前一排最低的位置接着排，窗口改变后先计算一下列数有没有发生变化，变化后才重排。当下拉滚动条达到最后一个DIV的顶部时请求ajax生成新的图片插到底部执行继排功能。</p></div>     <div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_011.jpg" /><h3>JQUERY瀑布流原理</h3><p>JQUERY瀑布流原理：每次排版取前一排最低的位置接着排，窗口改变后先计算一下列数有没有发生变化，变化后才重排。当下拉滚动条达到最后一个DIV的顶部时请求ajax生成新的图片插到底部执行继排功能。</p></div>

</div> <script>     $(function(){waterfall(".cell")});     function waterfall(cls){         if(!$(cls).length) return;//没有元素         $(".cell").live("click",function() {             $.fancybox.open($(this).find("img").attr("src"));         });//添加点击弹出图片效果         var con={             obj:null,//图片div对象             l:0, //总共数量             w:214,//列宽             s:10,//列间距             list:0, //多少列             arr:[],//最后一排数组             anim:[],//动画参数数组             n:0,//需要做动画的编号             state:"loading" //状态 loading:加载图片中，ajax:正在发生ajax请求，finish:完成任务，resize:执行了窗口变化         };         //查找数组最大与最小值         function get_value(obj,i){             if(!Object.prototype.toString.call(obj) === '[object Array]')return 0;             var arr=obj.concat().sort(function(a,b){return a-b});             return i==0?arr[0]:arr[arr.length-1];         }         con.obj=$(cls);//图片div对象         con.l=con.obj.size();//统计共有多少个图片div         con.list=Math.floor($("#container").width()/(con.w+con.s));//统计共有多少列         $(window).resize(function(){             var w=Math.floor($("#container").width()/(con.w+con.s));//重新统计共有多少列             if(w!=con.list){                 if("finish"==con.state){                     con.list=w;                     con.n=0;//图片编号又从0开始                     fall_pic(0);                 }else{                     con.state="resize";                 }             }         }).scroll(function(){             var top=Math.max.apply(Math,con.arr)-50;//get_value(con.arr,1)-50;//让滚动条离最底差50像素时触发新增图片动作             var scrollTop=document.documentElement.scrollTop||document.body.scrollTop||0;//滚动条距离             var windowHeight=document.documentElement.clientHeight||document.body.clientHeight||0;//窗口高度             if(windowHeight+scrollTop>=top){                 if("finish"==con.state){                     con.state="ajax";//当滚动条拉到看到最后一张图片时                     var html='';//实现案例中此改成ajax请求json或html,每次请求只增加一排                     for(var i=con.l;i<con.l+con.list;i++){                         html+='<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_'+('00'+i%162).slice(-3)+'.jpg" /><h3>'+i+' AJAX加载</h3><p>JQUERY瀑布流原理：每次排版取前一排最低的位置接着排，窗口改变后先计算一下列数有没有发生变化，变化后才重排。当下拉滚动条达到最后一个DIV的顶部时请求ajax生成新的图片插到底部执行继排功能。</p></div>';                     }                     $("#container").append(html);                     con.obj=$(cls);//更新对象                     con.n=con.l;//记录加载前的最后一个编号                     con.l=con.obj.size();//统计现在共有多少张图片                     load_pic(con.n);//接着加载前最后一张图片排序;                 }else{                     $(window).scrollTop(scrollTop-1);//让滚动条不要到底                 }             }         });         load_pic(0);//开始加载图片         function load_pic(n){             //确保新图片已加载成功             if(n<con.l){                 var obj=con.obj.eq(n);//获取对象                 var img=new Image();                 img.onload=function(){                     obj.find("img").attr("height",this.height);//设置好高可能对获取outerHeight()有改进？                     n++;load_pic(n);                 };                 img.onerror=function(){                     //加载失败就替换图片，并省去设置外围div的高                     obj.find("img").attr({height:200,src:"error.jpg"});                     n++;load_pic(n);                 };                 img.src=obj.find("img").attr("src");             }else{                 fall_pic(con.n);//开始执行计算与动画             }         }         function fall_pic(n){             if(0==n)con.arr=[];//清空数组             if(n<con.l){                 var obj=con.obj.eq(n);//获取对象                 var x= 0,y=0;//对象坐标值                 if(n<con.list){                     x=n*(con.w+con.s);//如果是第一排，y=0,x=宽度+列间距                     con.arr[n]=obj.outerHeight(true)+con.s;//记录屁股里那张图片的y坐标                 }else{                     var _i=0;//查一下最后一排哪张图片的底部离顶部最高，然后在其后面插入新图片                     y=con.arr[0];//先假设是第一排，然后比较                     for(var i= 0,l=con.arr.length;i<l;i++){                         if(y>con.arr[i]){                             y=con.arr[i];                             _i=i;                             x=i*(con.w+con.s);                         }                     }                     con.arr[_i]=con.arr[_i]+obj.outerHeight(true)+con.s;//替换数组                 }                 con.anim[n]={left:x,top:y};//数组应该快过$.data()方法吧 obj.data("coordinate",{left:x,top:y});                 n++;fall_pic(n);             }else{                 //$("#container").stop().animate({height:get_value(con.arr,2)},"fast");//设置外框高                 $("#container").stop().animate({height:Math.max.apply(Math,con.arr)},"fast");//设置外框高                 //符合条件的元素执行动画                 $(cls+(con.n>0?":gt("+(con.n-1)+")":"")).each(function(i){                     var coordinate=con.anim[i+con.n];                     if("ajax"==con.state){                         $(this).css(coordinate).hide().fadeIn(400);                     }else{                         $(this).animate(coordinate,600);                     }                 });                 setTimeout(function(){                     if("resize"==con.state&&con.list!=Math.floor($("#container").width()/(con.w+con.s))){                         con.state="finish";                         $(window).scroll();                     }else                     con.state="finish";                 },1000)             }         }     } </script> </body> </html>

图片流滚动效果html代码(复制)的更多相关文章

  1. javascript跟随滚动效果插件代码（javascript Follow Plugin）

    这篇文章介绍了javascript跟随滚动效果插件代码(javascript Follow Plugin),有需要的朋友可以参考一下Js 跟随滚动效果插件支持定义多个跟随ID,采用css fixed属 ...

  2. Jquery 文字上下滚动效果示例代码

      <!doctype html>   <html>   <head>   <meta charset="utf-8">       ...

  3. 利用原生JS实现网页1920banner图滚动效果

    内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...

  4. 使用jQuery实现向上循环滚动效果（超简单）

    今天突发奇想 想到的一个新思路 通过使用animate改变外边距达到滚动效果 再用复制节点插入到最后一行达到循环目的 HTML代码如下 <body> <ul style=" ...

  5. JS学习笔记之页面信息滚动效果

    效果截图: 1.无缝滚动效果 JS代码: <script> window.onload=function(){ var oInfobox=document.getElementById(' ...

  6. ［ios］新手笔记－。－UIPickerView 关于伪造循环效果和延时滚动效果

    查找了网上资料,循环效果绝大部分都是增加行数来制造循环的错觉,延时滚动就是利用NSTimer间隔出发滚动事件来制造滚动效果. 代码: #import <UIKit/UIKit.h>#imp ...

  7. js实现简单易用的上下无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 分享七款视差滚动效果的jQuery 插件

    视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...

  9. 特殊例子--JavaScript代码实现图片循环滚动效果

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

随机推荐

  1. 远程连接MySql连不上1130

    mysql数据库user表中已存在主机=%的用户root,连接却提示1130. 用navicat开启user表>>>>在表里直接修改%账户root的密码(看到是未加密过的内容) ...

  2. 【Android学习】自定义Android样式checkbox

    下面简单介绍下在Androdi中如何更改Checkbox的背景图片,可以自定义样式 1.首先res/drawable中定义编写如下样式的XML,命名为:checkbox_style: <?xml ...

  3. win7如何建立无线局域网

    将win7电脑变身WiFi热点,让手机.笔记本共享上网用win7建立无线局域网,可以共享上网可以局域网游戏.开启windows 7的隐藏功能:虚拟WiFi和SoftAP(即虚拟无线AP),就可以让电脑 ...

  4. Python Quick Start

    1.安装Python 官网下载python: https://www.python.org/ 有2.x 3.x版本, 注意,python3.0不向下兼容2.x版本,有很多包3.0不提供 下载完后直接点 ...

  5. 关于web上的图片格式问题，新的彩蛋

    我们耳熟能详的几种格式无外乎 png-8,png-24,jpeg,gif,svg. 但是上面的那些都不是能够另人惊喜的答案.关于新技术的是Webp,Apng.(是否有关注新技术,新鲜事物) 1)Web ...

  6. 【转载】干货来袭！Linux小白最佳实践：《超容易的Linux系统管理入门书》（连载七）LAMP集成安装

    学Linux做程序开发也好,做系统管理也好,做网络管理员也好,做系统运维也好,不会LAMP和LNMP,那就等于连皮毛都不会!本篇是文字版的LAMP集成安装,下次连载我们要介绍LNMP的文字版安装.有喜 ...

  7. Apache使用mysql认证用户

    使用MySQL进行认证 第1步:下载MySQL认证模块,并更名为mod_auth_mysql.so文件,并保存在apache的modules目录下 第2步:apache要加载此功能模块 LoadMod ...

  8. Comparator和Comparable

    java.util 接口 Comparator<T>   compare int compare(T o1, T o2) 比较用来排序的两个参数.根据第一个参数小于.等于或大于第二个参数分 ...

  9. 使用DNSSCrypt解决DNS污染问题

    本文转自 月光博客,如有需要,请阅读原文. google近期在国内是不能访问了,dropbox这货居然也被DNS污染了,幸好发现DNSCrypt这一神器,防止DNS污染的绝佳工具. 基本原理:DNSC ...

  10. 3月3日[Go_deep]Populating Next Right Pointers in Each Node

    原题:Populating Next Right Pointers in Each Node 简单的链表二叉树增加Next节点信息,没什么坑.不过还是WA了两次,还是有点菜,继续做,另外leetcod ...