思路实现：
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.οnlοad=function () {locationImg("container","box");// json字符串模拟数据var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]}//拖拽滚动条触发事件 window.οnscrοll=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;
}