Comments: A webpage waterfall effect that enables unlimited image loading. Based on the popular HTML5 technology, in addition to implementing waterfall streams, It also adds the image modification effect of CSS5, another webpage waterfall effect, such as the rounded border of the slice and the three-dimensional effect of the Image Shadow, enables unlimited image loading. Based on the popular HTML5 technology, seven images are called in the demo page. For the convenience of demonstration, it is automatically displayed cyclically with the scroll bar, in this way, you can better understand the effect of waterfall streams. In addition to implementing waterfall streams, It also adds the image modification effect of CSS5, such as the rounded border of the slice and the three-dimensional effect of the Image Shadow. It is a good material for learning waterfall streams.
The Code is as follows:
<! 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 waterfall stream loading </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 the key frame */
@-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 3 s release-in-out 1;
-Moz-animation: shade 3 s release-in-out 1;
-Ms-animation: shade 3 s release-in-out 1;
-O-animation: shade 3 s release-in-out 1;
Animation: shade 3 s release-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 stream
PBL ('wrapp', 'box ');
// Simulate 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 rolling Loading
Window. onscroll = function (){
// Verify the data request
If (getCheck ()){
Var wrap = document. getElementById ('wrapp ');
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 an image
Var pic = document. createElement ('div ');
Pic. className = 'pic ';
Info. appendChild (pic );
// Create an img
Var img = document. createElement ('img ');
Img. src = '/jscss/demoimg/201312/' + data [I]. src;
Img. style. height = 'auto ';
Pic. appendChild (img );
// Create a title
Var title = document. createElement ('div ');
Title. className = 'title ';
Info. appendChild (title );
// Create a tag
Var a = document. createElement ('A ');
A. innerHTML = data [I]. title;
Title. appendChild ();
}
PBL ('wrapp', 'box ');
}
}
}
/**
* Main function of waterfall stream
* @ Param wrap [Str] ID of the outer Element
* @ Param box [Str] class name of each box
*/
Function PBL (wrap, box ){
// 1. Obtain the outer layer and each box
Var wrap = document. getElementById (wrap );
Var boxs = getClass (wrap, box );
// 2. Obtain the number of columns displayed on the screen
Var boxW = boxs [0]. offsetWidth;
Var colsNum = Math.floor(document.doc umentElement. clientWidth/boxW );
Wrap. style. width = boxW * colsNum + 'px'; // assign the width to the outer layer.
// 3. Loop all the boxes and arrange them according to the waterfall stream
Var everyH = []; // defines an array to store the height of each column
For (var I = 0; I <boxs. length; I ++ ){
If (I <colsNum ){
EveryH [I] = boxs [I]. offsetHeight;
} Else {
Var minH = Math. min. apply (null, everyH); // obtain the height of the smallest Column
Var minIndex = getIndex (minH, everyH); // obtain the index of the smallest Column
GetStyle (boxs [I], minH, boxs [minIndex]. offsetLeft, I );
EveryH [minIndex] + = boxs [I]. offsetHeight; // update the minimum column height.
}
}
}
/**
* Getting class Elements
* @ Param warp [Obj] outer layer
* @ Param className [Str] Class Name
*/
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;
}
/**
* Obtain the index of the smallest Column
* @ Param minH [Num] minimum height
* @ Param everyH [Arr] array of the height of all columns
*/
Function getIndex (minH, everyH ){
For (index in everyH ){
If (everyH [index] = minH) return index;
}
}
/**
* Data request verification
*/
Function getCheck (){
Var incluenth = document.doc umentElement. clientHeight;
Var scrollH = document.doc umentElement. scrollTop | document. body. scrollTop;
Return export enth + scrollH> = getlath ()? True: false;
}
/**
* Obtain the height of the column where the last box is located.
*/
Function getlath (){
Var wrap = document. getElementById ('wrapp ');
Var boxs = getClass (wrap, 'box ');
Return boxs [boxs. length-1]. offsetTop + boxs [boxs. length-1]. offsetHeight;
}
/**
* Set the loading Style
* @ Param box [obj] specifies the Box
* @ Param top [Num] the top value of box
* @ Param left [Num] left value of box
* @ Param index [Num] Number of the box
*/
Var getStartNum = 0; // set the position of the number of entries to be loaded.
Function getStyle (box, top, left, index ){
If (getStartNum> = index) return;
Detail (box).css ({
'Position': 'absolute ',
'Top': top,
"Left": left,
"Opacity": "0"
});
$ (Box). stop (). animate ({
"Opacity": "1"
},999 );
GetStartNum = index; // the location where the number of data entries in the request are updated.
}
</Script>
</Head>
<Body>
<Section id = "title">
<H2> waterfall effect learning </Section>
<Div id = "wrap">
<Div class = "box">
<Div class = "info">
<Div class = "pic"> </div>
<Div class = "title"> <a href = "#"> image title </a> </div>
</Div>
</Div>
<Div class = "box">
<Div class = "info">
<Div class = "pic"> </div>
<Div class = "title"> <a href = "#"> image title </a> </div>
</Div>
</Div>
<Div class = "box">
<Div class = "info">
<Div class = "pic"> </div>
<Div class = "title"> <a href = "#"> image title </a> </div>
</Div>
</Div>
<Div class = "box">
<Div class = "info">
<Div class = "pic"> </div>
<Div class = "title"> <a href = "#"> image title </a> </div>
</Div>
</Div>
<Div class = "box">
<Div class = "info">
<Div class = "pic"> </div>
<Div class = "title"> <a href = "#"> image title </a> </div>
</Div>
</Div>
<Div class = "box">
<Div class = "info">
<Div class = "pic"> </div>
<Div class = "title"> <a href = "#"> image title </a> </div>
</Div>
</Div>
<Div class = "box">
<Div class = "info">
<Div class = "pic"> </div>
<Div class = "title"> <a href = "#"> image title </a> </div>
</Div>
</Div>
</Div>
<Div style = "text-align: center; clear: both">
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
