Javascript implements waterfall flow to dynamically load images

This article mainly introduces in detail the principle of dynamic loading of images using JavaScript to implement waterfall flow. It has a certain reference value. Interested friends can refer to it.

The example in this article shares the js waterfall with everyone. Stream loading effect, dynamic loading of pictures, for your reference, the specific content is as follows

Mouse scroll event, when the mouse scrolls to the bottom, the picture is dynamically loaded.

1. HTML code

##

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
";
//    cparent.innerHTML+=content;
   }
   imgLocation("container","box");
  }
 }
}
 
function checkFlag(){
 var cparent=document.getElementById("container");
 var ccontent=getChildElement(cparent,"box");//图片的所有box数
 var lastContentHeight=ccontent[ccontent.length-1].offsetTop;//最后一张图片距离顶部高度
 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//滚动条距离顶部高度
 var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;//屏幕高度
// console.log(lastContentHeight+","+scrollTop+","+pageHeight);
 if(lastContentHeight
The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website! 
Related recommendations: 
jQuery and CSS3 folding card drop-down list box to achieve the effect
JavaScript to use Canvas to draw graphics 

The above is the detailed content of Javascript implements waterfall flow to dynamically load images. For more information, please follow other related articles on the PHP Chinese website!