js的瀑布流效果
思路实现：
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;
}