记录JS实现瀑布流照片墙效果
首先是前端页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流</title> <link rel="stylesheet" type="text/css" href="js瀑布流.css"> <script type="text/javascript" src="js瀑布流.js"></script> </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 class="box"> <div class="box_img"> <img src="img/6.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/7.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/8.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/9.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/10.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/11.jpg"/> </div> </div> </div> </body> </html>
接下来是样式
*{ margin:0px; padding: 0px; } #container{ position: relative; } .box{ padding: 5px; float: left; } .box_img{ padding: 5px; border: 1px solid #cccccc; box-shadow: 0 0 5px #cccccc; border-radius: 5px; } .box_img img{ width: 150px; height: auto; }
最后是最主要的JS代码
加载图片
function imgLocation(parent,content){ var cparent=document.getElementById(parent); var cconten=getChildElement(cparent,content);//得到所有子节点 var imgWidth=cconten[0].offsetWidth// 得到宽度，每张图片的宽度都是固定的，所以这里可以随便取一张 var cols=Math.floor(document.documentElement.clientWidth/imgWidth)//频幕的宽度除以图片的宽度，就是这一排能放图片的个数 cparent.style.cssText=""+imgWidth*cols+"px; margin:0 auto"; //设置主容器的样式 var boxHeightArr=[];//第一排图片的高度 for(var i=0;i<cconten.length;i++){ if (i<cols) { //如果是第一排 ,cols为一排能放图片的个数 boxHeightArr[i]=cconten[i].offsetHeight; } else{ //找到第一排最小图片的高度 var minHeight=Math.min.apply(null,boxHeightArr)//最小图片的高度 var minIndex= getminHeightLocation(boxHeightArr,minHeight); cconten[i].style.position="absolute"; cconten[i].style.top=minHeight+"px"; cconten[i].style.left=cconten[minIndex].offsetLeft+"px"; boxHeightArr[minIndex]=boxHeightArr[minIndex]+cconten[i].offsetHeight;//把当前最小的高度加上当前追加图片的高度 } } }
获得子节点
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; }
得到最小高度图片的位置
function getminHeightLocation(boxHeightArr,minHeight) { for(var i in boxHeightArr){ if(boxHeightArr[i]==minHeight){ return i; } } }
判断是否需要加载
function checkFlag(){ var cparent=document.getElementById("container"); var cconten=getChildElement(cparent,"box"); var lastContentHeight=cconten[cconten.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; } }
页面加载完触发
window.onload=function(){ imgLocation("container","box") var imgData={'data':[{'src':'92.jpg'},{'src':'16.jpg'},{'src':'17.jpg'},{'src':'18.jpg'}]}; //鼠标滚动事件 window.onscroll=function(){ if(checkFlag()){ //是否需要加载图片 var cparent=document.getElementById("container"); for(var i=0;i<imgData.data.length;i++){ var cconten=document.createElement("div"); cconten.className="box"; cparent.appendChild(cconten); var boximg=document.createElement("div"); boximg.className="box_img"; cconten.appendChild(boximg); var img=document.createElement("img"); img.src="img/"+imgData.data[i].src; boximg.appendChild(img); } imgLocation("container","box") } } }