0.实现原理
首先对所有图片统一规定宽度，可以计算出每一行可排列的图片列数N，然后将每一列图片的高度保存到一个数组当中；然后从第N+1张图片开始，寻找第一行图片中高度最小的位置，通过绝对定位的方式在此处加载第N+1张图片，同时把第N+1张图片的高度加上数组里面的最小值并且返回到数组里面，依次类推。1.HTML文件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>js瀑布流</title><link rel="stylesheet" type="text/css" href="css/style.css"><script src="js/app.js"></script></head><body><div id="container"><div class="box"><div class="box_img"><img src="image/1.jpg"><p class="img_name">1.jpg</p></div></div><div class="box"><div class="box_img"><img src="image/2.jpg"><p class="img_name">2.jpg</p></div></div><div class="box"><div class="box_img"><img src="image/3.jpg"><p class="img_name">3.jpg</p></div></div><div class="box"><div class="box_img"><img src="image/4.jpg"><p class="img_name">4.jpg</p></div></div><div class="box"><div class="box_img"><img src="image/5.jpg"><p class="img_name">5.jpg</p></div></div><div class="box"><div class="box_img"><img src="image/6.jpg"><p class="img_name">6.jpg</p></div></div><div class="box"><div class="box_img"><img src="image/7.jpg"><p class="img_name">7.jpg</p></div></div><div class="box"><div class="box_img"><img src="image/8.jpg"><p class="img_name">8.jpg</p></div></div><div class="box"><div class="box_img"><img src="image/9.jpg"><p class="img_name">9.jpg</p></div></div><div class="box"><div class="box_img"><img src="image/10.jpg"><p class="img_name">10.jpg</p></div></div><div class="box"><div class="box_img"><img src="image/11.jpg"><p class="img_name">11.jpg</p></div></div><div class="box"><div class="box_img"><img src="image/12.jpg"><p class="img_name">12.jpg</p></div></div><div class="box"><div class="box_img"><img src="image/13.jpg"><p class="img_name">13.jpg</p></div></div></div></body></html>
2.CSS样式表文件
/*设置网页内外边距*/*{margin: 0px;padding: 0px;}/*设置主容器的布局方式为相对布局*/#container{position: relative;}/*设置盒子的内边距、浮动属性*/.box{padding: 5px;float: left;}/*设置图片容器的内边距、边框、阴影、圆角*/.box_img{padding: 5px;border: 5px solid #cccccc;box-shadow: 0 0 5px #cccccc;border-radius: 5px;}/*设置图片的宽度和高度*/.box_img img{width: 200px;height: auto;}/*设置图片名称段落文本的颜色、水平对齐方式*/.img_name{color: darkred;text-align: center;}
3.js脚本文件
window.onload=function(){imgLocation("container","box");var imgData = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"}]};/*为窗口添加滚动条事件*/window.onscroll = function() {if(checkFlag()){//alert("hello");loadImage(imgData)}}}/*图片按指定规则排列*/function imgLocation(parent,content){/*将parent下的所有的content全部取出*/var cparent = document.getElementById(parent);var ccontent = getChildElement(cparent,content);//console.log(ccontent);var imgWidth = ccontent[0].offsetWidth;var num = Math.floor(document.documentElement.clientWidth/imgWidth);cparent.style.cssText = "Width:"+imgWidth*num+"px; margin:0px auto";var BoxHeightArr = [];for(var i=0;i<ccontent.length;i++){if(i<num) {//BoxHeightArr.push(ccontent[i].offsetHeight);BoxHeightArr[i] = ccontent[i].offsetHeight;console.log(BoxHeightArr[i]);}else{var minHeight = Math.min.apply(null,BoxHeightArr);//console.log(minHeight);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]+=ccontent[i].offsetHeight;}}}/*自动加载图片*/function loadImage(imgData) {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 box_img = document.createElement("div");box_img.className = "box_img";ccontent.appendChild(box_img);var img = document.createElement("img");img.src = "image/"+imgData.data[i].src;var p = document.createElement("p");p.className = "img_name";p.innerText = imgData.data[i].src;box_img.appendChild(img);box_img.appendChild(p);}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;console.log(lastContentHeight+" "+scrollTop+" "+pageHeight);if(lastContentHeight < pageHeight + scrollTop){var imgccontent = getChildElement(cparent,"box_img");//alert(imgccontent.length);if(imgccontent.length < 100){return true;}else{alert("图片够多了，已经加载了100张了！");return false;}}}/*得到最小高度所在索引*/function getminheightLocation(BoxHeightArr,minHeight){for(var i in BoxHeightArr) {if(BoxHeightArr[i] == minHeight) {return i;}}}/*得到parent中的所有content子对象*/function getChildElement(parent,content){var contentArr = [];var allcontent = parent.getElementsByTagName("*");for(var i=0;i<allcontent.length;i++){if(allcontent[i].className==content){contentArr.push(allcontent[i]);}}return contentArr;}
5.效果展示
5.参考
极客学院视频教程:Web前端开发教学 - 第一部分：H5+CSS+JS
欢迎关注我的公众号。
