JavaScript realizes the waterfall flow dynamic loading picture principle _javascript Skill

The example of this article for everyone to share the effect of JS waterfall flow loading, dynamic loading pictures for your reference, the specific contents are as follows

Mouse scrolling event, when the mouse scroll to the bottom, dynamically loading the picture.

1. HTML code

<!
  DOCTYPE html>  

2. CSS Code

*{
 margin:0px;
 padding:0px;
}
#container {
 position:relative;
}
. box{
 padding:5px;
 Float:left;
 margin:0px Auto;
box_img{
 padding:5px;
 border:1px solid #DCDCDC;
 box-shadow:0 0 5px #ccc;
 border-radius:5px
}
. Box_img img{
 width:230px;
}

3. JavaScript code

Window.onload=function () {imglocation ("container", "box"); var imgdata={"Data": [{"src": "1.jpg"},{"src": "2.jpg"},{"src": "3.jpg"},{"src": "3.jpg"},{"src": "4.jpg"},{"src": "5."
 JPG "},{" "src": "6.jpg"},{"src": "2.jpg"},{"src": "3.jpg"},{"src": "3.jpg"},{"src": "4.jpg"},{"src": "5.jpg"}]}
  Window.onscroll=function () {//Console.log (DOCUMENT.DOCUMENTELEMENT.SCROLLTOP);
   if (Checkflag ()) {var Cparent=document.getelementbyid ("container");
    for (Var i=0;i<div class= ' box_img ' ></div></div>";   // Cparent.innerhtml+=content;
  } imglocation ("Container", "box");
 }} function Checkflag () {var Cparent=document.getelementbyid ("container"); var ccontent=getchildelement (cparent, "box");//Picture of all box number Var lastcontentheight=ccontent[ccontent.length-1]. offsettop;//Last picture distance top height var scrolltop=document.documentelement.scrolltop| | document.body.scrolltop;//scroll bar distance top height var pageheight=document.documentelement.clientheight| |
 document.body.clientheight;//screen Height//console.log (lastcontentheight+ "," +scrolltop+ "," +pageheight);
 if (lastcontentheight<scrolltop+pageheight) {return true;
 } function Imglocation (parent,content) {var cparent=document.getelementbyid (parent); var ccontent=getchildelement (cparent,content);//Picture of all box number var imgwidth=ccontent[0].offsetwidth;//picture width var num= Math.floor (Document.documentelement.clientwidth/imgwidth), and/or one line put the number of pictures cparent.style.csstext= "width:" +imgWidth*num + "px;margin:0px Auto";//container width var boxheightarr=[];//each column box height for (var i=0;i<ccontent. length;i++) {if (i<num) {boxheightarr[i]=ccontent[i].offsetheight; }else{var minheight=math.min.apply (Null,boxheightarr);//min height var minindex = getminheightlocation (boxHeightArr,minHe
   ight)//Get the minimum height subscript//Console.log (minheight+ "," +minindex);
   ccontent[i].style.position= "Absolute"; ccontent[i].style.top=minheight+ "px";//ccontent[i].style.left=ccontent[minindex].offsetleft+ "px" from top height;
Distance to the left length boxheightarr[minindex]+=ccontent[i].offsetheight; Console.log (ccontent[i].offsetheight+ ", +ccontent[i].height),//ccontent[i].height=undefined}}} function
  Getminheightlocation (Boxheightarr,minheight) {for (var i-Boxheightarr) {if (boxheightarr[i]==minheight) {return I
 }} function GetChildElement (parent,content) {//Remove all content under parent from Var contentarr=[];
 var allcontent=parent.getelementsbytagname ("*");
  for (i=0;i<allcontent.length;i++) {if (allcontent[i].classname== "box") {Contentarr.push (allcontent[i]); } return Contentarr;
}
 

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.