Home > Article > Web Front-end > JS implementation of waterfall flow layout example
This article mainly introduces the JS implementation of waterfall flow layout effect display in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.
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; }
Related recommendations:
Native ajax waterfall flow demo example sharing
Instance analysis of JS implementation of waterfall flow layout
How to achieve waterfall flow effect in JS
The above is the detailed content of JS implementation of waterfall flow layout example. For more information, please follow other related articles on the PHP Chinese website!