HTML5 implemented image unlimited loading of waterfall flow effect with border rounded shadows

Author：Eve Cole Update Time：2025-05-12 11:48:02

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">

<head>

<title>jQuery Unlimited Loading Waterfall Flow</title>

/* 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>

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>

<h2>Learning of waterfall flow effects</h2>By Smile.

</section>

<div>