HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
程序员文章站
2023-11-13 08:27:58
一款网页瀑布流效果，可以实现图片的无限制加载。基于时下流行的HTML5技术编写而成，除了实现瀑布流，还加入了CSS5的图片修饰效果，比如图片的圆角边框、图片阴影立体效果等... 14-03-07...
又一款网页瀑布流效果，可以实现图片的无限制加载。基于时下流行的html5技术编写而成，演示页面中一共调用了7张图片，为了演示方便，这里让其随滚动条的滚动自动循环显示，这样大家更能清楚的看明白瀑布流的效果。除了实现瀑布流，还加入了css5的图片修饰效果，比如图片的圆角边框、图片阴影立体效果等，是学习瀑布流的好素材 。
<!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=gb2312" />
<title>jquery无限加载瀑布流</title>
<style type="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 ease-in-out 1;
-moz-animation:shade 3s ease-in-out 1;
-ms-animation:shade 3s ease-in-out 1;
-o-animation:shade 3s ease-in-out 1;
animation:shade 3s ease-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].offsetwidth;
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].offsetheight;
}else{
var minh = math.min.apply(null,everyh);//获得最小的列的高度
var minindex = getindex(minh,everyh); //获得最小列的索引
getstyle(boxs[i],minh,boxs[minindex].offsetleft,i);
everyh[minindex] += boxs[i].offsetheight;//更新最小列的高度
}
}
}
/**
* 获取类元素
* @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:false;
}
/**
* 获得最后一个box所在列的高度
*/
function getlasth(){
var wrap = document.getelementbyid('wrap');
var boxs = getclass(wrap,'box');
return boxs[boxs.length-1].offsettop+boxs[boxs.length-1].offsetheight;
}
/**
* 设置加载样式
* @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>
<section id="title">
<h2>瀑布流效果的学习</h2>by smile.
</section>
<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>
复制代码
代码如下:<!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=gb2312" />
<title>jquery无限加载瀑布流</title>
<style type="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 ease-in-out 1;
-moz-animation:shade 3s ease-in-out 1;
-ms-animation:shade 3s ease-in-out 1;
-o-animation:shade 3s ease-in-out 1;
animation:shade 3s ease-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].offsetwidth;
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].offsetheight;
}else{
var minh = math.min.apply(null,everyh);//获得最小的列的高度
var minindex = getindex(minh,everyh); //获得最小列的索引
getstyle(boxs[i],minh,boxs[minindex].offsetleft,i);
everyh[minindex] += boxs[i].offsetheight;//更新最小列的高度
}
}
}
/**
* 获取类元素
* @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:false;
}
/**
* 获得最后一个box所在列的高度
*/
function getlasth(){
var wrap = document.getelementbyid('wrap');
var boxs = getclass(wrap,'box');
return boxs[boxs.length-1].offsettop+boxs[boxs.length-1].offsetheight;
}
/**
* 设置加载样式
* @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>
<section id="title">
<h2>瀑布流效果的学习</h2>by smile.
</section>
<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>
上一篇： ASP.NET 重定向的几种方法小结
下一篇： html5适合移动应用开发的12大特性