正文

[JS练习] 瀑布流照片墙

IP云
IP云V管理员/0 阅读
09/11
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

记录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="width:"+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")
}
}
}