HTML code:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Waterfall Flow </title>
<link href= "Css/index.css" rel= "stylesheet"/>
<script src= "Js/index.js" ></script>
<body>
<div id= "Container" >
<div class= "box" >
<div class= "Box-img" >
</div>
</div>
<!--<div class= "box" >
<div class= "Box-img" >
</div>
</div>-->
... ... <!--a lot of picture boxes--
</div>
</body>
CSS code:
* {
margin:0px;
padding:0px;
}
#container {
position:relative;
}
. box {
Float:left;
padding:5px;
border:1px solid #ccc;
border-radius:5px;
-o-border-radius:5px;
-ms-border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
. box-img img {
width:200px;
Height:auto;
box-shadow:0px 0px 10px black;
-o-shadow:0px 0px 10px black;
-moz-shadow:0px 0px 10px black;
-ms-shadow:0px 0px 10px black;
-webkit-shadow:0px 0px 10px black;
}
JS Code:
Window.onload = function () {
Automatically load data sources
var imgdata = {"Data": [{"src": "1.jpg"}, {"src": "2.jpg"}, {"src": "3.jpg"}, {"src": "4.jpg"}, {"src": "5.jpg" }, {"src": "6.jpg"}]};
Imglocation ("Container", "box");
Window.onscroll = function () {
if (getflag () = = True) {
var cparent = document.getElementById ("container");
for (var i = 0; i < imgData.data.length; i++) {
Looping through the creation of these nodes
<div class= "box" >
<div class= "Box-img" >
</div>
</div>
var ccontent = document.createelement ("div");
Ccontent.classname = "box";
Cparent.appendchild (ccontent);
var box_img = document.createelement ("div");
Box_img.classname = "Box-img";
Ccontent.appendchild (BOX_IMG);
var img = document.createelement ("img");
IMG.SRC = "images/" + imgdata.data[i].src;
Box_img.appendchild (IMG);
}
Re-traverse all child nodes
Imglocation ("Container", "box");
}
}
}
Returns whether to start loading pictures
function Getflag () {
var cparent = document.getElementById ("container");
var ccontent = getchildelement (cparent, "box");
Get the distance from the top of the last picture
var lastcontentheight = ccontent[ccontent.length-1].offsettop;
Get scroll bar Scroll height
var scrollheight = Document.body.scrollTop | | Document.documentElement.scrollTop;
Get the height of the viewable area
var pageheight = Document.body.clientHeight | | Document.documentElement.clientHeight;
If the last picture is from the top distance < scroll height + visible area height, you can start to continue loading
if (Lastcontentheight < scrollheight + pageheight) {
return true;
}
}
Ways to place picture positions
function imglocation (parent, content) {
Parent Div Object
var cparent = document.getElementById (parent);
Get the required child nodes by GetChildElement (parent Div object, child node class selector) method
The GetChildElement () method returns an array of specific child nodes
var ccontent = getchildelement (cparent, content);
Get the width of the picture box
var imgwidth = ccontent[0].offsetwidth;
Calculates the maximum number of pictures that can be displayed in a row in a display screen (rounded down)
var num = Math.floor (document.documentelement.clientwidth/imgwidth);
Calculates the total width of the parent box and centers it with Num
Cparent.style.cssText = "width:" + imgwidth * num + "px;margin:0px auto;";
Declares an array to hold the height of all pictures
var imgheightarr = [];
Traversing child nodes
for (var i = 0; i < ccontent.length; i++) {
if (i < num) {
A picture of the first row
Imgheightarr[i] = ccontent[i].offsetheight;
} else {
Get the minimum height of the picture stored in imgheightarr[]
var minheight = Math.min.apply (null, Imgheightarr);
Get a picture index with the smallest height
The Getminheightlocation () method returns the lowest-height picture index
var minindex = getminheightlocation (Imgheightarr, minheight);
Image positioning after line break
Ccontent[i].style.position = "absolute";
Ccontent[i].style.top = minheight + "px";
Ccontent[i].style.left = ccontent[minindex].offsetleft + "px";
Change the height of the lowest height picture
Imgheightarr[minindex] = Imgheightarr[minindex] + ccontent[i].offsetheight;
}
}
}
Returns the index of the smallest picture in height
function Getminheightlocation (Imgheightarr, MinHeight) {
for (var i in Imgheightarr) {
if (imgheightarr[i] = = MinHeight) {
return i;
}
}
}
Returns an array of child nodes
function getchildelement (parent, content) {
var contentarr = [];
var allcontent = parent.getelementsbytagname ("*");
for (var i = 0; i < allcontent.length; i++) {
If the classname of a child node equals the specified class name
if (allcontent[i].classname = = content) {
Add it to a child node array
Contentarr.push (Allcontent[i]);
}
}
return Contentarr;
}
Picture Waterfall Stream
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
