文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

HTML5怎样实现图片无限加载瀑布流效果

2024-04-02 19:55

关注

这篇文章主要介绍了HTML5怎样实现图片无限加载瀑布流效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

代码如下:

<!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{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'); 
} 
} 
} 
 
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;//更新最小列的高度 
} 
} 
} 
 
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; 
} 
 
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; 
} 
 
function getLastH(){ 
var wrap = document.getElementById('wrap'); 
var boxs = getClass(wrap,'box'); 
return boxs[boxs.length-1].offsetTop+boxs[boxs.length-1].offsetHeight; 
} 
 
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"> 
<h3>瀑布流效果的学习</h3>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 > 
</div> 
</body> 
</html>

感谢你能够认真阅读完这篇文章,希望小编分享的“HTML5怎样实现图片无限加载瀑布流效果”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯