前两天通过B站在极客学院学习了JS动态瀑布流效果：主要是HTML+CSS控制样式，通过JS实现全局瀑布流样式，以及通过访问自定义的JSON字符串，实现图片无限加载；现对其代码进行整理，供日后学习参考。
HTML代码部分：
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>瀑布流</title><meta name="description" content=""><meta name="keywords" content=""><link href="css/style.css" rel="stylesheet"><script type="text/javascript" src="js/app.js"></script><script type="text/javascript" src="jquery-3.3.1.min.js"></script></head><body><div id="container"><div class="box"><div class="boximg"><img src="images/11.jpg" alt=""></div> </div><div class="box"><div class="boximg"><img src="images/12.jpg" alt=""></div> </div><div class="box"><div class="boximg"><img src="images/13.jpg" alt=""></div> </div><div class="box"><div class="boximg"><img src="images/14.jpg" alt=""></div> </div><div class="box"><div class="boximg"><img src="images/15.jpg" alt=""></div> </div><div class="box"><div class="boximg"><img src="images/16.jpg" alt=""></div> </div><div class="box"><div class="boximg"><img src="images/17.jpg" alt=""></div> </div><div class="box"><div class="boximg"><img src="images/18.jpg" alt=""></div> </div><div class="box"><div class="boximg"><img src="images/19.jpg" alt=""></div> </div><div class="box"><div class="boximg"><img src="images/20.jpg" alt=""></div> </div><div class="box"><div class="boximg"><img src="images/21.jpg" alt=""></div> </div><div class="box"><div class="boximg"><img src="images/22.jpg" alt=""></div> </div> </div></body></html>
CSS代码部分
@charset "UTF-8";/*** * @authors zhanghe-V (807597850@)* @date -06-11 20:12:16* @version $1.0$*/*{padding: 0px;margin: 0px;}#container{position: relative;}.box{padding: 5px;float: left;}.boximg{padding: 5px;border: 1px solid #595959FF;box-shadow: 0 0 5px #ccc; /*阴影效果*/border-radius: 5px;/*圆角效果*/}.boximg img{width: 200px;height: auto;}
JS代码部分
/*** * @authors zhanghe-V (807597850@)* @date -06-11 20:23:17* @version $1.0$*/window.onload = function(){imgLocation("container","box")var imgData = {"data":[{"src":"11.jpg"},{"src":"12.jpg"},{"src":"13.jpg"},{"src":"14.jpg"},{"src":"15.jpg"},{"src":"16.jpg"},{"src":"17.jpg"},{"src":"18.jpg"},{"src":"19.jpg"},{"src":"20.jpg"},{"src":"21.jpg"},{"src":"22.jpg"},]}window.onscroll = function(){if (checkFlag()) {var cparent = document.getElementById("container");for (var i = 0; i < imgData.data.length; i++) {var ccontent = document.createElement("div");ccontent.className="box";cparent.appendChild(ccontent);var boximg = document.createElement("div");boximg.className="boximg";ccontent.appendChild(boximg);var img = document.createElement("img");img.src = "images/"+imgData.data[i].src;boximg.appendChild(img);}imgLocation("container","box");}}}function checkFlag(){var cparent = document.getElementById("container");var ccontent = getChildElement(cparent,"box");var lastContentHeight = ccontent[ccontent.length-1].offsetTop;var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;if (lastContentHeight<(scrollTop+pageHeight)) {return true;}console.log(lastContentHeight+","+scrollTop+","+pageHeight);}function imgLocation(parent,content){//将parent下所有的content全部取出var cparent = document.getElementById(parent);var ccontent = getChildElement(cparent,content);var imgwidth = ccontent[0].offsetWidth;//获得每一行显示图片的个数var cols = Math.floor(document.documentElement.clientWidth / imgwidth);//设置父容器container的宽度，并设置样式居中cparent.style.cssText = "width:"+imgwidth*cols+"px;margin:0 auto";var boxHeightArr = [];for (var i = 0; i < ccontent.length; i++) {if (i<cols) {boxHeightArr[i] = ccontent[i].offsetHeight;}else{var minheight = Math.min.apply(null,boxHeightArr);var minIndex = getminheightLocation(boxHeightArr,minheight);ccontent[i].style.position = "absolute";ccontent[i].style.top = minheight+"px";ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";boxHeightArr[minIndex] = boxHeightArr[minIndex]+ccontent[i].offsetHeight;}}}function getminheightLocation(boxHeightArr,minheight){for (var i in boxHeightArr) {if (boxHeightArr[i] == minheight) {return i;}}}//将parent下的所有类名为content的div存储在自定义的数组contentArr中function getChildElement(parent,content){var contentArr = [];var allcontent = parent.getElementsByTagName("*");//获取所有内容，返回的是一个dom对象可以遍历，有length属性，但不是数组。for (var i = 0; i < allcontent.length; i++) {if (allcontent[i].className == content) {contentArr.push(allcontent[i]);//向数组contentArr末尾进行追加content}}return contentArr;}
