This article shares the loading effect of js waterfall flow for everyone's reference. The specific content is as follows
Mouse scrolling event, when the mouse scrolls to the bottom, dynamically loads the picture.
1. HTML code
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>js realizes waterfall flow effect - dynamic loading pictures</title> <link rel="stylesheet" href="css/waterfallflow.css" type="text/css" /> <script src="js/waterfallflow.js"></script> </head> <body> <div id="container"> <div> <div> <img src="img/1.jpg" /> </div> </div> <div> <div> <img src="img/3.jpg" /> </div> </div> <div> <img src="img/4.jpg" /> </div> </div> <div> <img src="img/4.jpg" /> </div> </div> <div> <img src="img/5.jpg" /> </div> </div> <div> <img src="img/6.jpg" /> </div> </div> <div> <img src="img/7.jpg" /> </div> </div> <div> <img src="img/3.jpg" /> </div> </div> <div> <img src="img/3.jpg" /> </div> </div> <div> <img src="img/1.jpg" /> </div> </div> </div> <div> <div> <img src="img/2.jpg" /> </div> </div> <div> <img src="img/1.jpg" /> </div> </div> <div> <img src="img/2.jpg" /> </div> </div> <div> <img src="img/2.jpg" /> </div> </div> <div> <img src="img/3.jpg" /> </div> </div> <div> <img src="img/4.jpg" /> </div> </div> <div> <div> <img src="img/5.jpg" /> </div> </div> <div> <img src="img/5.jpg" /> </div> </div> <div> <img src="img/6.jpg" /> </div> </div> </div> </body></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<imgData.data.length;i++){ var ccontent=document.createElement("div"); ccontent.className="box"; cparent.appendChild(ccontent); var boximg=document.createElement("div"); boximg.className="box_img"; ccontent.appendChild(boximg); var img=document.createElement("img"); img.src="img/"+imgData.data[i].src; boximg.appendChild(img); //Other method adds content behind the div, not overwriting the original content// var content="<div class='box'><div class='box_img'><img src='img/"+imgData.data[i].src+"'// cparent.innerHTML+=content; } imgLocation("container","box"); } }} function checkFlag(){ var cparent=document.getElementById("container"); var ccontent=getChildElement(cparent,"box");//All boxes of the picture var lastContentHeight=ccontent[ccontent.length-1].offsetTop;//The last image is from the top height var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//The scrollbar is from the 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);//all boxes of the picture var imgWidth=ccontent[0].offsetWidth;//The picture width var num=Math.floor(document.documentElement.clientWidth/imgWidth);//Put the number of pictures in one row cparent.style.cssText="width:"+imgWidth*num+"px;margin:0px auto";//Container width var boxHeightArr=[];//Each column boxheight for(var i=0;i<ccontent.length;i++){ if(i<num){ boxHeightArr[i]=ccontent[i].offsetHeight; }else{ var minHeight=Math.min.apply(null,boxHeightArr);//Minimum height var minIndex = getMinheightLocation(boxHeightArr,minHeight);//Get the minimum height index// console.log(minHeight+","+minIndex); ccontent[i].style.position="absolute"; ccontent[i].style.top=minHeight+"px";//Get from top height ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";//Get from left to left boxHeightArr[minIndex]+=ccontent[i].offsetHeight;// console.log(ccontent[i].offsetHeight+","+ccontent[i].height);//ccontent[i].height=undefined } }} function getMinheightLocation(boxHeightArr,minHeight){ for(var i in boxHeightArr){ if(boxHeightArr[i]==minHeight){ return i } }} function getChildElement(parent,content){ //Take all contents under parent 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 all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.