Since there is no server, I use a json string as the source of the image data loading when pulling down
html:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script src="js/waterfall.js"></script><style type="text/css"> *{padding: 0;margin:0;} #main{ position: relative; } .pin{ padding: 15px 0 0 15px; float:left; } .box{ padding: 10px; border:1px solid #ccc; box-shadow: 0 0 6px #ccc; border-radius: 5px; } .box img{ width:162px; height:auto; }</style></head><body><div id="main"> <div> <div> <img src="./images/1.jpg"/> </div> </div> <div> <img src="./images/2.jpg"/> </div> </div> <div> <img src="./images/3.jpg"/> </div> </div> <div> <img src="./images/4.jpg"/> </div> </div> <div> <img src="./images/4.jpg"/> </div> </div> <div> <img src="./images/5.jpg"/> </div> </div> <div> <img src="./images/6.jpg"/> </div> </div> <div> <img src="./images/7.jpg"/> </div> </div> <div> <img src="./images/8.jpg"/> </div> </div> <div> <img src="./images/9.jpg"/> </div> </div> <div> <img src="./images/9.jpg"/> </div> </div> <div> <img src="./images/10.jpg"/> </div> </div> <div> <img src="./images/10.jpg"/> </div> </div> <div> <img src="./images/10.jpg"/> </div> </div> <div> <img src="./images/10.jpg"/> </div> </div> <div> <img src="./images/10.jpg"/> </div> </div> <div> <img src="./images/11.jpg"/> </div> </div> <div> <img src="./images/12.jpg"/> </div> </div> <div> <img src="./images/12.jpg"/> </div> </div> <div> <img src="./images/13.jpg"/> </div> </div> <div> <img src="./images/14.jpg"/> </div> </div> <div> <img src="./images/15.jpg"/> </div> </div> <div> <img src="./images/16.jpg"/> </div> </div> <div> <img src="./images/16.jpg"/> </div> </div> <div> <img src="./images/14.jpg"/> </div> </div> <div> <img src="./images/15.jpg"/> </div> </div> <div> <img src="./images/16.jpg"/> </div> </div> <div> <img src="./images/17.jpg"/> </div> </div> <div> <img src="./images/18.jpg"/> </div> </div> <div> <img src="./images/18.jpg"/> </div> </div> <div> <img src="./images/19.jpg"/> </div> </div> <div> <img src="./images/20.jpg"/> </div> </div> <div> <img src="./images/21.jpg"/> </div> </div> </div></div></body></html>JSWallper.js:
window.onload=function(){ waterfall('main','pin'); var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]}; window.onscroll=function(){ if(checkscrollside()){ var oParent = document.getElementById('main');// Parent object for(var i=0;i<dataInt.data.length;i++){ var oPin=document.createElement('div'); //Add element node oPin.className='pin'; //Add class name attribute oParent.appendChild(oPin); //Add child node var oBox=document.createElement('div'); oBox.className='box'; oPin.appendChild(oBox); var oImg=document.createElement('img'); oImg.src='./images/'+dataInt.data[i].src; oBox.appendChild(oImg); } waterfall('main','pin'); }; }} /* parent parent id pin element id*/function waterfall(parent,pin){ var oParent=document.getElementById(parent);// Parent object var aPin=getClassObj(oParent,pin);// Get the array of storage block box pin aPin var iPinW=aPin[0].offsetWidth;// The wide var num=Math.floor(document.documentElement.clientWidth/iPinW);// The number of pins that can be accommodated in each row [window width divided by one block box width] oParent.style.cssText='width:'+iPinW*num+'px; margin:0 auto;';//Set the parent centering style: fixed width + automatic horizontal margin var pinHArr=[];// Used to store the heights of all block boxes in each column. a for(var i=0;i<aPin.length;i++){//Transfer each block box element of the array aPin var pinH=aPin[i].offsetHeight; if(i<num){ pinHArr[i]=pinH; //The num block box pin in the first row is added to the array pinHArr }else{ var minH=Math.min.apply(null,pinHArr);//The minimum value in the array pinHArr minH var minHIndex=getminHIndex(pinHArr,minH); aPin[i].style.position='absolute';//Set the absolute displacement aPin[i].style.top=minH+'px'; aPin[i].style.left=aPin[minHIndex].offsetLeft+'px'; //The height of the minimum high element of the array + Add aPin[i] block box height pinHArr[minHIndex]+=aPin[i].offsetHeight;//Update the column height after adding the block box} }} /* *Get the array of the same child elements through the class classes of the parent and child elements*/function getClassObj(parent,className){ var obj=parent.getElementsByTagName('*');//Get all subsets of the parent var pinS=[];//Create an array to collect child elements for (var i=0;i<obj.length;i++) {//Transf the child elements, judge the category, and press into the array if (obj[i].className==className){ pinS.push(obj[i]); } }; return pinS;}/**** *Get the index of the minimum pin height index */function getminHIndex(arr,minH){ for(var i in arr){ if(arr[i]==minH){ return i; } }}function checkscrollside(){ var oParent=document.getElementById('main'); var aPin=getClassObj(oParent,'pin'); var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);//Create the height of [triggering the block box function waterfall()]: the last block box is from the top of the web page + half of its height (the implementation starts loading without rolling to the end) var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//Paper height return (lastPinH<scrollTop+documentH)?true:false;//Return true after reaching the specified height, triggering the waterfall() function}Demo diagram:
Source code download://www.VeVB.COM/jiaoben/452663.html
Demo address: http://demo.VeVB.COM/js/2016/JSWallper/