HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>时间对象</title> </head> <body> <div id="container"> <div class="box"> <div class="box_img"> <img src="img/1.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="img/2.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="img/3.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="img/4.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="img/5.jpg"> </div> </div> </div> </body> </html>CSS:
*{ margin: 0px; padding: 0px; } #container{ position: relative; } .box{ padding: 5px; float: left; } .box_img{ padding: 5px; border: 1px solid #000000; box-shadow: 0 0 5px #cccc0c; border-radius: 5px; } .box_img img{ width: 150px; height: auto; }JS:
window.onload=function (){ imgLocation("container","box") var imgData={"data":[{"src":"2.jpg"},{"src":"3.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="box_img"; ccontent.appendChild(boximg); var img = document.createElement("img"); img.src = "img/"+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; //滚动条滚动的高度 //console.log(lastContentHeight); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //页面的高度 //console.log(scrollTop); var pageHeight=document.documentElement.clientHeight||document.body.clientHeight; //console.log(lastContentHeight+":"+scrollTop+":"+pageHeight); if (lastContentHeight<scrollTop+pageHeight){ return true; } } function imgLocation(parent,content) { //将parent下多有的content全部取出 var cparent=document.getElementById(parent); var ccontent=getChildElement(cparent,content); var imgWidth=ccontent[0].offsetWidth; var num=Math.floor(document.documentElement.clientWidth / imgWidth); cparent.style.cssText="width:"+imgWidth*num+"px;margin:0 auto"; //将第二排图片放在第一排最小的图片下方 var BoxHeightArr=[]; for (var i=0;i<ccontent.length;i++){ if (i<num) { BoxHeightArr[i] = ccontent[i].offsetHeight; //收集图片的高度. //console.log(BoxHeightArr[i]); }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; } } } 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; }
转载请标明出处:WEB-HTML+CSS+JS-瀑布流-1
文章来源: https://blog.csdn.net/u013362192/article/details/87920178