本文实例为大家分享了JS实现瀑布流布局展示的具体代码，供大家参考，具体内容如下
html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流布局</title> <script src="/UploadFiles/2021-04-02/wallpoll.js">css部分
*{ 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部分
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("div"); box.className="box"; oparent.appendChild(box); var pic=document.createElement("div"); pic.className="pic"; box.appendChild(pic); var img=document.createElement("img"); img.src="/UploadFiles/2021-04-02/">地址。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。