Comment: A web page waterfall flow effect can achieve unlimited loading of pictures. Written based on the popular HTML5 technology today, in addition to realizing waterfall flow, CSS5 image modification effects are also added, such as the rounded corner borders of the picture, the three-dimensional effect of the picture shadow, etc.
Another web page waterfall flow effect can achieve unlimited loading of images. Written based on the popular HTML5 technology nowadays, a total of 7 pictures are called in the demonstration page. For the convenience of demonstration, it is automatically displayed as the scroll bars scroll, so that everyone can see the effect of the waterfall flow more clearly. In addition to realizing waterfall flow, CSS5's picture modification effects are also added, such as the rounded corner borders of the picture, the three-dimensional effect of the picture, etc., which is a good material for learning waterfall flow.<!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 Unlimited Loading Waterfall Flow</title>
<style type="text/css">
/* Tag redefinition*/
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;}
/* Define keyframe*/
@-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(){
//Run the main function of the waterfall flow
PBL('wrap','box');
//Simulation data
var data = [{'src':'1.jpg','title':'Image title'},{'src':'2.jpg','title':'Image title'},{'src':'3.jpg','title':'Image title'},{'src':'4.jpg','title':'Image title'},{'src':'5.jpg','title':'Image title'},{'src':'6.jpg','title':'Image title'},{'src':'7.jpg','title':'Image title'}];
//Set scroll load
window.onscroll = function(){
//Calculate data request
if(getCheck()){
var wrap = document.getElementById('wrap');
for(i in data){
//Create a box
var box = document.createElement('div');
box.className = 'box';
wrap.appendChild(box);
//Create info
var info = document.createElement('div');
info.className = 'info';
box.appendChild(info);
//Create pic
var pic = document.createElement('div');
pic.className = 'pic';
info.appendChild(pic);
//Create img
var img = document.createElement('img');
img.src = '/jscss/demoimg/201312/'+data[i].src;
img.style.height = 'auto';
pic.appendChild(img);
//Create title
var
});
$(box).stop().animate({
"opacity":"1"
},999);
getStartNum = index;//Update the number of requested data
}
</script>
</head>
<body>
<section>
<h2>Learning of waterfall flow effects</h2>By Smile.
</section>
<div>
<div>
<div>
<div><img src="/jscss/demoimg/201312/1.jpg"></div>
<div><a href="#">Image Title</a></div>
</div>
</div>
<div>
<div>
<div><img src="/jscss/demoimg/201312/2.jpg"></div>
<div><a href="#">Image Title</a></div>
</div>
</div>
<div>
<div>
<div><img src="/jscss/demoimg/201312/3.jpg"></div>
<div><a href="#">Image Title</a></div>
</div>
</div>
<div>
<div>
<div><img src="/jscss/demoimg/201312/4.jpg"></div>
<div><a href="#">Image Title</a></div>
</div>
</div>
<div>
<div>
<div><img src="/jscss/demoimg/201312/5.jpg"></div>
<div><a href="#">Image Title</a></div>
</div>
</div>
<div>
<div>
<div><img src="/jscss/demoimg/201312/6.jpg"></div>
<div><a href="#">Image Title</a></div>
</div>
</div>
<div>
<div>
<div><img src="/jscss/demoimg/201312/7.jpg"></div>
<div><a href="#">Image Title</a></div>
</div>
</div>
</div>
<div>
</div>
</body>
</html>