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

本篇内容主要讲解“HTML5怎么实现图片无限加载的瀑布流效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“HTML5怎么实现图片无限加载的瀑布流效果”吧!

兴县网站建设公司成都创新互联公司,兴县网站设计制作，有大型网站制作公司丰富经验。已为兴县千余家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的兴县做网站的公司定做！

代码如下:

 
 
 
 
 
 
/* 标签重定义 */ 
body{padding:0;margin:0;background:#ddd url(/jscss/demoimg/201312/bg55(1).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;} 
 
 
 
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(1).jpg','title':'图片标题'},{'src':'6(2).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=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;//更新请求数据的条数位置 
} 
 
 
 
 
瀑布流效果的学习
By Smile.