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


Posted in HTML / CSS onMarch 07, 2014

又一款网页瀑布流效果,可以实现图片的无限制加载。基于时下流行的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>
HTML / CSS 相关文章推荐
细说CSS3中的选择符
Oct 17 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
Sep 23 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 #HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 #HTML / CSS
HTML5+CSS3应用详解
Feb 24 #HTML / CSS
html5中valid、invalid、required的定义
Feb 21 #HTML / CSS
html5实现多文件的上传示例代码
Feb 13 #HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 #HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 #HTML / CSS
You might like
PHP file_exists问题杂谈
2012/05/07 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
python中子类调用父类函数的方法示例
2017/08/18 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
python反扒机制的5种解决方法
2021/02/06 Python
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
关于逃课的检讨书
2014/01/23 职场文书
五年级语文教学反思
2014/01/30 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
矛盾论读书笔记
2015/06/29 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
python执行js代码的方法
2021/05/13 Python
swagger如何返回map字段注释
2021/07/03 Java/Android
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL
netty 实现tomcat的示例代码
2022/06/05 Servers