<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <style type="text/css"> *{ margin: 0; padding: 0; } #main{ margin: 15px auto; position: relative; } .box{ padding: 15px 0 0 15px; float: left; } .pic{ padding: 15px; border: 1px solid #ccc; box-shadow: 0 0 5px #ccc; border-radius: 5%; } .box .pic img{ width: 168px; } </style> <title>瀑布流-页面布局结构</title> </head> <body> <div id="main"> <div class="box"> <div class="pic"><img src="img/pubuliu/1.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/2.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/3.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/4.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/5.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/6.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/7.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/8.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/9.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/10.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/11.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/12.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/13.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/14.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/15.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/16.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/17.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/18.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/19.jpg" ></div> </div> <div class="box"> <div class="pic"><img src="img/pubuliu/20.jpg" ></div> </div> </div> </body> <script type="text/javascript"> //写入waterfall函数，为了两次调用 1刷新页面加载一次 2拖动滚动条的时候加载一次 //拖动滚动条的时候重新加载图片 window.onload=function(){ waterfall("main","box"); window.onscroll=function(){ //滚动条在滚动时开始加载图片 } } function waterfall(parent,box){ var oParent=document.getElementById(parent) //获取#main var oBox=getClass(box) //获取box // main的宽：页面可视区域/单个图片的宽，用单个图片的宽*总个数 var width=document.documentElement.clientWidth || document.body.clientWidth //可视区域的宽 var oBoxWidth=oBox[0].offsetWidth //获取图片的宽度 var num = Math.floor(width/oBoxWidth) //可视区域可以放多少个图片(去掉小数点后的数) oParent.style.width=num*oBoxWidth+'px' //main的宽度 // 下标*图片宽度=left 上面图片的高度=top 每下一排的第一个放到上一排空最大的地方，以此类推 var hrr=[]; //存储图片的高度 for(var i=0;i<oBox.length;i++){ if(i<num){ //如果没有超出一行的个数 hrr.push(oBox[i].offsetHeight) }else{ // hrr数组中最小值的下标位置 var min=Math.min.apply(null,hrr) //hrr里面的最小值 // console.log(min) var index=inArray(hrr,min) // console.log(index) // console.log(index*oBoxWidth) oBox[i].style.position="absolute" oBox[i].style.left=index*oBoxWidth+'px' oBox[i].style.top=min+'px' hrr[index]=hrr[index] + oBox[i].offsetHeight } } function inArray(hrr,min){ ///循环hrr里的每一个值，如果某个和最小值min相等，返回i下标 for(var i=0;i<hrr.length;i++){ if(hrr[i]==min){ return i } } } } function getClass(box){ //获取class名称节点的函数 // 1 把页面上所有的节点获取到 // 2 循环遍历所有节点，进行条件判断 // 3 符合要求的节点放入到数组中 var doms=document.getElementsByTagName('*') var reg=new RegExp("\b"+box+"\b") var arr=[] for(var i=0;i<doms.length;i++){ if(reg.test(doms[i].className)){ arr.push(doms[i]) } } return arr } </script> </html>