HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影

更新时间:2023-04-06 16:12:55 阅读：评论：0

又一款网页瀑布流效果，可以实现图片的无限制加载。基于时下流行的html5技术编写而成，演示页面中一共调用了7张图片，为了演示方便，这里让其随滚动条的滚动自动循环显示，这样大家更能清楚的看明白瀑布流的效果。除了实现瀑布流，还加入了css5的图片修饰效果，比如图片的圆角边框、图片阴影立体效果等，是学习瀑布流的好素材。

复制代码代码如下:

<!doctype html public “-//w3c//dtd xhtml 1.0 transitional//en” “/d/file/titlepic/xhtml1-transitional.dtd& />
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”content-type” content=”text/html; chart=gb2312″ />

<title>jquery无限加载瀑布流</title>

<style type=̶营养改善计划1;text/css”>

/* 标签重定义 */

body{padding:0;margin:0;background:#ddd url(/jscss/demoimg/201312/bg55.jpg) repeat;}

img{border:none;}

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

a:hover{color:#999;}

#title{width:600px;margin:20px auto;text-align:center;}

/* 定义关键帧 */

@-webkit-keyframes shade{

from{opacity:1;}

15%{opacity:0.4;}

to{opacity:1;}

}

@-moz-keyframes shade{

from{opacity:1;}

15%{opacity:0.4;}

to{opacity:1;}

}

@-ms-keyframes shade{

from{opacity:1;}

15%{opacity:0.4;}

to{opacity:1;}

}

@-o-keyframes shade{

from{opacity:1;}

15%{opacity:0.4;}

to{opacity:1;}

}

@keyframes shade{

from{opacity:1;}

15%{opacity:0.4;}

to{opacity:1;}

}

/* wrap */

#wrap{width:auto;height:auto;margin:0 auto;position:relative;}

#wrap .box{width:280px;height:auto;padding:10px;border:none;float:left;}

#wrap .box .info{width:280px;height:auto;border-radius:8px;box-shadow:0 0 11px #666;background:#fff;}

#wrap .box .info .pic{width:260px;height:auto;margin:0 auto;padding-top:10px;}

#wrap .box .info .pic:hover{

-webkit-animation:shade 3s ea-in-out 1;

-moz-animation:shade 3s ea-in-out 1;

-ms-animation:shade 3s ea-in-out 1;

-o-animation:shade 3s ea-in-out 1;

animation:shade 3s ea-in-out 1;

}

#wrap .box .info .pic img{width:260px;border-radius:3px;}

#wrap .box .info .title{width:260px;height:40px;margin:0 auto;line-height:40px;text-align:center;color:#666;font-size:18px;font-weight:bold;overflow:hidden;}

</style>

<script type=”text/javascript” src=”/ajaxjs/jquery-1.6.2.min.js”></script>

<script type=”text/javascript”>

window.onload = function(){

//运行瀑布流主函数

pbl(‘wrap’,’box’);

//模拟数据

var data = [{‘src’:’1.jpg’,’title’:’图片标题’},{‘src’:’2.jpg’,’title’:’图片标题’},{‘src’:’3.jpg’,’title’:’图片标题’},{‘src’:’4.jpg’,’title’:’图片标题’},{‘src’:’5.jpg’,’title’:’图片标题’},{‘src’:’6.jpg’,’title’:’图片标题’},{‘src’:’7.jpg’,’title’:’图片标题’}];

//设置滚动加载

window.onscroll = function(){

//校验数据请求

if(getcheck()){

var wrap = document.getelementbyid(‘wrap’);

for(i in data){

//创建box

var box = document.createelement(‘div’);

box.classname = ‘box’;

wrap.appendchild(box);

//创建info

var info = document.createelement(‘div’);

info.classname = ‘info’;

box.appendchild(info);

//创建pic

var pic = document.createelement(‘div’);

pic.classname = ‘pic’;

info.appendchild(pic);

//创建img

var img = document.createelement(‘img’);

img.src = ‘/jscss/demoimg/201312/’+data[i].src;

img.style.height = ‘auto’;

pic.appendchild(img);

//创建title

var title = document.createelement(‘div’);

title.classname = ‘title’;

info.appendchild(title);

//创建a标记

var a = document.createelement(‘a’);

a.innerhtml = data[i].title;

title.appendchild(a);

}

pbl(‘wrap’,’box’);

}

}

}

/**

* 瀑布流主函数

* @param wrap [str] 外层元素的id

* @param box [str] 每一个box的类名

*/

function pbl(wrap,box){

//1.获得外层以及每一个box

var wrap = document.getelementbyid(wrap);

var boxs = getclass(wrap,box);

//2.获得屏幕可显示的列数

var boxw = boxs[0].offtwidth;

var colsnum = math.floor(document.documentelement.clientwidth/boxw);

wrap.style.width = boxw*colsnum+’px’;//为外层赋值宽度

//3.循环出所有的box并按照瀑布流排列

var everyh = [];//定义一个数组存储每一列的高度

for (var i = 0; i < boxs.length; i++) {

if(i<colsnum){

everyh[i] = boxs[i].offtheight;

}el{

var minh = math.min.apply(null,everyh);//获得最小的列的高度

var minindex = getindex(minh,everyh); //获得最小列的索引

getstyle(boxs[i],minh,boxs[minindex].offtleft,i);

everyh[minindex] += boxs[i].offtheight;//两弹之父更新最小列的高度

}

}

}

/**

* 获取类元素

* @param warp [obj] 外层

* @param classname [str] 类名

*/

function getclass(wrap,classname){

var obj = wrap.getelementsbytagname(‘*’);

var arr = [];

for(var i=0;i<obj.length;i++){

if(obj[i].classname == classname){

arr.push(obj[i]);

}

}

return arr;

}

/**

* 获取最小列的索引

* @param minh [num] 最小高度

* @param everyh [arr] 所有列高度的数组

*/

function getindex(minh,everyh){

for(index in everyh){

if (everyh[index] == minh ) return index;

}

}

/**

* 数据请求检齐白石简介验

*/

function getcheck(){

var documenth = document.documentelement.clientheight;

var scrollh = document.documentelement.scrolltop || document.body.scrolltop;

return documenth+scrollh>=getlasth() ?true:fal;

}

/**

* 获得最后一个box所在列的高度

*/

function getlasth(){

var wrap = document.getelementbyid(‘wrap’);

var boxs = getclass(wrap,’box’);

return boxs[boxs.length-1].offttop+boxs[boxs.length-1].offtheight;

}

/**

* 设置加载样式

* @param box [obj] 设置的box

* @param top [num] box的top值

* @param left [num] box的left值

* @param index [num] box的第几个

*/

var getstartnum = 0;//设置请求加载的条数的位置

function getstyle(box,top,left,index){

if (getstartnum>=index) return;

$(box).css({

‘position’:’absolute’,

‘top’:top,

“left”:left,

“opacity”:”0″

});

$(box).stop().animate({

“opacity”:”1″

},999);

getstartnum = index;//更新请求数据的条数位置

}

</script>

</head>

<body>

<ction id=”title”>

<h2>瀑布流效果的学习</h2>by smile.

</ction>

<div id=”wrap”>

<div class=”box”>

<div class=”info”>

<div class=”pic”><img src=”/jscss/demoimg/201312/1.jpg”></div>

<div class=”title”><a href=”#”>图片标题</a></div>

</div>

</div>

<div class=”box”>

<div class=”info”>

<div class=”pic”><img src=”/jscss/demoimg/201312/2.jpg”></div>

<div class=”title”><a href=”#”>图片标题</a></div>

</div>

</div>

<div class=”box”>

<div class=”info”>

<div class=”pic”><img src=”/jscss/demoimg/201312/3.jpg”></div>

<什么是公积金div class=”title”><a href=”#”>图片标题</a></div>

</div>

</div>

<div class=”box”>

<div class=”info”>

<div class=”pic”><img src=”/jscss/demoimg/201312/4.jpg”></div>

<div class=”title”><a href=”#”>图片标题</a></div>

</div>

</div>

<div class=”box”>

<div class=”info”>

<div class=”pic”><img src=”/jscss/demoimg/201312/5.jpg”></div>

<div class=”title”><a href=”#”>图片标题</a></div>

</比喻句是什么意思div>

</div>

<div class=”box”>

<div class=”info”>

<div class=”pic”><img src=”/jscss/demoimg/201312/6.jpg”></div>

<div class=”title”><a href=”#”>图片标题</a></div>

</div>

</div>

<div class=”box”>

<div class=”info”>

<div class=”pic”><img src=”/jscss/demoimg/201312/7.jpg”></div>

<div class=”title”><a href=”#”>图片标题</a></div>

</div>

</div>

</div>

<div style=”text-align:center;clear:both”>

</div>

</body>

</html>