Home > Article > Web Front-end > Example analysis of JS implementation of waterfall flow layout
The example in this article shares the specific code for JS to implement waterfall flow layout display for your reference. The specific content is as follows
html part
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流布局</title> <script src="wallpoll.js"></script> <link rel="stylesheet" href="wallpoll.css" rel="external nofollow" > </head> <body> <p id="main"> <p class="box"> <p class="pic"> <img src="wallpoll/0.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/0.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/1.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/2.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/3.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/4.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/5.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/6.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/7.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/8.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/9.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/10.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/11.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/12.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/13.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/14.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/15.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/16.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/17.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/18.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/19.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/20.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/21.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/22.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/23.jpg" alt=""> </p> </p> <p class="box"> <p class="pic"> <img src="wallpoll/24.jpg" alt=""> </p> </p> </p> </body> </html>
css part
*{ padding:0px; margin:0px; } .main{ position:relative; } .box{ padding:15px 0 0 10px; float:left; } .pic{ padding:10px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px #ccc; /*float:left;*/ } img{ width:170px; height:auto; }
JS part
window.onload=function(){ waterfall('main','box'); var dataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"}]} window.onscroll=function(){ if(checkScrollSlide){ for(var i=0;i<dataInt.data.length;i++){ var oparent=document.getElementById("main"); var box=document.createElement("p"); box.className="box"; oparent.appendChild(box); var pic=document.createElement("p"); pic.className="pic"; box.appendChild(pic); var img=document.createElement("img"); img.src="wallpoll/"+dataInt.data[i].src; pic.appendChild(img); } } waterfall('main','box'); } } function waterfall(parent,child){ var oparent=document.getElementById(parent); var boxs=oparent.getElementsByClassName(child); var boxw=boxs[0].offsetWidth; var cols=Math.floor(document.documentElement.clientWidth/boxw); oparent.style.cssText="width:"+cols*boxw+"px;margin:0 auto"; var harr=new Array(); for(var i=0;i<boxs.length;i++){ if(i<cols){ harr.push(boxs[i].offsetHeight); }else{ var minH=Math.min.apply(null,harr); var index=getMinhIndex(harr,minH); boxs[i].style.position="absolute"; boxs[i].style.top=minH+"px"; boxs[i].style.left=boxs[index].offsetLeft+"px"; harr[index]+=boxs[i].offsetHeight; } } } function getMinhIndex(arr,val){ for(var i in arr){ if(arr[i]===val){ return i; } } } function checkScrollSlide(){ var oparent=document.getElementById("main"); var boxs=oparent.getElementsByClassName("box"); var lastBox=boxs[boxs.length-1]; var height=lastBox.offsetTop+Math.floor(lastBox.offsetHeight/2); var scrollHeigth=document.documentElement.scrollTop || document.body.scrollTop; // console.log(scrollHeigth); var seeHeigth=document.documentElement.clientHeigth || document.body.clientHeigth; return seeHeigth+scrollHeigth>height?true:false; }
Course address.
The above is the detailed content of Example analysis of JS implementation of waterfall flow layout. For more information, please follow other related articles on the PHP Chinese website!