您的位置：首页 > Web前端 > JavaScript

js的瀑布流效果

2016-03-14 15:09 603 查看
思路实现：

1，得到一排能够放多少张图片

2，将第二排的图片中的第一张放在上面一排最低的那张图片下

3，当最后一张图片的offsetTop<scrollTop+clientHeight 的时候加载图片

1，html的代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/app1.js"></script>
</head>
<body>

<div id="container">
<div class="box">
<div class="box_img"><img src="images/1.jpg" alt=""></div>
</div>
<div class="box">
<div class="box_img"><img src="images/2.jpg"alt=""></div>
</div>
<div class="box">
<div class="box_img"><img src="images/3.jpg"alt=""></div>
</div>
<div class="box">
<div class="box_img"><img src="images/4.jpg"alt=""></div>
</div>
<div class="box">
<div class="box_img"><img src="images/5.jpg"alt=""></div>
</div>

<div class="box">
<div class="box_img"><img src="images/6.jpg"alt=""></div>
</div>
<div class="box">
<div class="box_img"><img src="images/7.jpg"alt=""></div>
</div>

<div class="box">
<div class="box_img"><img src="images/8.jpg"alt=""></div>
</div>
<div class="box">
<div class="box_img"><img src="images/9.jpg"alt=""></div>
</div>
<div class="box">
<div class="box_img"><img src="images/10.jpg"alt=""></div>
</div>
<div class="box">
<div class="box_img"><img src="images/11.jpg"alt=""></div>
</div>
<div class="box">
<div class="box_img"><img src="images/12.jpg"alt=""></div>
</div>
<div class="box">
<div class="box_img"><img src="images/13.jpg"alt=""></div>
</div>
<div class="box">
<div class="box_img"><img src="images/12.jpg"alt=""></div>
</div>
<div class="box">
<div class="box_img"><img src="images/13.jpg"alt=""></div>
</div>

<div class="box">
<div class="box_img"><img src="images/10.jpg"alt=""></div>
</div>
<div class="box">
<div class="box_img"><img src="images/11.jpg"alt=""></div>
</div>
<div class="box">
<div class="box_img"><img src="images/12.jpg"alt=""></div>
</div>
<div class="box">
<div class="box_img"><img src="images/13.jpg"alt=""></div>
</div>
<div class="box">
<div class="box_img"><img src="images/12.jpg"alt=""></div>
</div>
<div class="box">
<div class="box_img"><img src="images/13.jpg"alt=""></div>
</div>

</div>

</body>
</html>


2,css的代码：

*{margin: 0;padding: 0}
#container{position: relative;}
.box{padding: 5px; float: left;}
.box_img{padding: 5px; border: 1px solid #ccc; box-shadow:0 0 5px #ccc; border-radius: 5px;}
.box_img img{width: 150px; height: auto;}


3，js的代码：

window.onload=function  () {
locationImg("container","box");

// json字符串模拟数据
var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]}
//拖拽滚动条触发事件
window.onscroll=function  () {
if(checkFlag("container","box")){
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="images/"+imgData.data[i].src;
boximg.appendChild(img);

}
}
locationImg("container","box");

}
}

function checkFlag (parent,content) {
var cparent=document.getElementById(parent);
var content=getChildsElement(cparent,content);
//获取最后一个元素的高度
var lastContentHeight=content[content.length-1].offsetTop;
//获取滚动条的告诉
var scrollTop=document.documentElement.scrollTop|| document.body.scrollTop;
var pageHeight=document.documentElement.clientHeight|| document.body.clientHeight;
if(lastContentHeight<(pageHeight+scrollTop)){return true;}
}

function locationImg (parent,content) {
var cparent=document.getElementById(parent);
var ccontent=getChildsElement(cparent,content);
//得到图片的宽度
var imgWidth=ccontent[0].offsetWidth;
var cols=Math.floor((document.documentElement.clientWidth)/imgWidth);

// 得到一排多少张图片
cparent.style.cssText="width:"+imgWidth*cols+"px;margin: 0 auto;"

var boxHeigthArr=[];
for(var i=0;i<ccontent.length; i++){
if(i<cols){
boxHeigthArr[i]= ccontent[i].offsetHeight;

}
else{

// 得到数组中最小的
var minHeight=Math.min.apply(null,boxHeigthArr);
var minIndex=getMinHeightLocation(boxHeigthArr,minHeight);
ccontent[i].style.position="absolute";
ccontent[i].style.top=minHeight+"px";
ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
boxHeigthArr[minIndex]=boxHeigthArr[minIndex]+ccontent[i].offsetHeight;
}

}
}

// 得到最小高度图片的位置
function getMinHeightLocation (boxHeigthArr,minHeight) {
for(i in boxHeigthArr){
if(boxHeigthArr[i]==minHeight){
return i;
}
}
}

//得到有多少张图片
function getChildsElement (parent,content) {
var contentArr=[];
var allcontents=document.getElementsByTagName("*");
for(var i=0;i<allcontents.length;i++){
if(allcontents[i].className==content){
contentArr.push(allcontents[i]);

}
}

return contentArr;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航