图片流滚动效果html代码(复制)
<!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代码(复制)的更多相关文章
- javascript跟随滚动效果插件代码(javascript Follow Plugin)
这篇文章介绍了javascript跟随滚动效果插件代码(javascript Follow Plugin),有需要的朋友可以参考一下Js 跟随滚动效果插件支持定义多个跟随ID,采用css fixed属 ...
- Jquery 文字上下滚动效果示例代码
<!doctype html> <html> <head> <meta charset="utf-8"> ...
- 利用原生JS实现网页1920banner图滚动效果
内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...
- 使用jQuery实现向上循环滚动效果(超简单)
今天突发奇想 想到的一个新思路 通过使用animate改变外边距达到滚动效果 再用复制节点插入到最后一行达到循环目的 HTML代码如下 <body> <ul style=" ...
- JS学习笔记之页面信息滚动效果
效果截图: 1.无缝滚动效果 JS代码: <script> window.onload=function(){ var oInfobox=document.getElementById(' ...
- [ios]新手笔记-。-UIPickerView 关于伪造循环效果和延时滚动效果
查找了网上资料,循环效果绝大部分都是增加行数来制造循环的错觉,延时滚动就是利用NSTimer间隔出发滚动事件来制造滚动效果. 代码: #import <UIKit/UIKit.h>#imp ...
- js实现简单易用的上下无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 分享七款视差滚动效果的jQuery 插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...
- 特殊例子--JavaScript代码实现图片循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Nginx - HTTP Configuration, Module Directives
Socket and Host Configuration This set of directives will allow you to configure your virtual hosts. ...
- ubuntu 更新软件源
ubuntu 更新软件源 修改文件sources.list 位于/etc/apt/sources.list,并备份原文件为sources.list.bak deb http://mirrors.163 ...
- js 后台弹窗
后台弹出操作成功,失败信息 /// <summary> /// 弹出信息,并跳转指定页面. /// </summary> public static void AlertAnd ...
- 逻辑推理:在一个100条语句的列表中,第n条语句是“在这个列表中,恰有n条语句为假”,可以得出什么结论?
<离散数学及其应用>第六版1.1练习题第43题的个人分析 题目:在一个100条语句的列表中,第n条语句是"在这个列表中,恰有n条语句为假".......... ...
- (转)DockPanel的一点点改进
1.当双击Tab时,原先是直接把当前Tab所表示的这个窗体,从主窗体的框架上分离现来,成为一个浮动的窗体.这不是我想要的,我把它改成了双击关闭.在DockPaneStripBase的WndProc方法 ...
- 【转载】Linux小白福利:《超容易的Linux系统管理入门书》(三)在虚拟机上安装Linux
本篇是Linux小白最佳实践第3篇,目的就是让白菜们自己动手安装个Linux玩玩.如果你是Linux小白,请务必亲自动手来安装.不想安装多个操作系统的,虚拟机是最佳选择,一台电脑上可以用虚拟机安装7. ...
- Java使用wkhtmltox实现HTML代码生成PDF文档或者图片
由于项目需要,把HTML代码转为PDF或者图片进行保存.最开始使用Flying Saucer来把HTML代码生成为PDF文档,功能已经开发出来了,也能够完成转换功能,期间也遇到了中文支持以及图片路径的 ...
- 洛古 P1373 小a和uim之大逃离
P1373 小a和uim之大逃离 题目提供者lzn 标签 动态规划 洛谷原创 难度 提高+/省选- 题目背景 小a和uim来到雨林中探险.突然一阵北风吹来,一片乌云从北部天边急涌过来,还伴着一道道闪电 ...
- CAF(C++ actor framework)使用随笔(unbecome与keep_behavior用法)
看usermanual(使用随笔一里面有)看到差不多一半的时候,这个keep_behavior与unbeacome的结合引起了我的注意.(这是为什么呢?) 因为它的示例代码写的太简单了!我真的没看太懂 ...
- 第一个C++
输入:cin>>(相当于scanf) #include <iostream> using namespace std; int main() { int number; ...