在极客学院下载的js基础视频中学习到了用js实现瀑布流效果，然后自己总结了两个关键的点，一个是瀑布流效果的实现，另一个是下拉动态加载图片。
首先是HTML代码，如下：
<div id="container">
<div class="box">
<div class="imgBox">
</div>
</div>
......
</div>
- 一个父容器
contanier中多个放图片的盒子，至于为什么要用两个div来包含住img标签，是为了后面设置position属性而用的。
其次是CSS代码，如下：
*{margin:0px;padding:0px;}
#container{
position:relative;
}
.box{
float:left;
padding:5px;
}
.imgBox{
padding:5px;
border:1px solid #CCCCCC;
box-shadow: 0 0 5px #CCC;
border-radius:5px;
}
.imgBox img{
width:200px;
height:auto;
}
- 这里为了好看，给图片设置了边框，内边距还有阴影的效果，HTML和CSS代码都比较简单，重点还是放在JS的实现上。
由于JS的代码比较多，我就一个个函数，按照顺序来分析，
function imgLocation(parent,content){
//将parent下所有content取出
var cparent=document.getElementById(parent);
var ccontent = getChildElement(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";//通过style.cssText来改变元素的样式
//确定位置
var BoxHeightArr=[];
//判断一排中的最小位置
for(var i=0;i<ccontent.length;i++){
if(i<cols){
BoxHeightArr[i]=ccontent[i].offsetHeight;//只存入一行的高度
} else{
var minHeight=Math.min.apply(null,BoxHeightArr);
var minIndex=getminheightLocation(BoxHeightArr,minHeight);
ccontent[i].style.position="absolute";
ccontent[i].style.top=minHeight+"px";
ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
BoxHeightArr[minIndex]=BoxHeightArr[minIndex]+ccontent[i].offsetHeight;//改变原来最小高度图片的高度
}
}
}
第一个函数叫做imgLocation，顾名思义是用来给图片定位的，该函数会传入两个参数，一个是父元素，这里就是我们的container，另一个参数是内容，这里就是我们的imgBox。
- 首先我们要知道容器中有多少张图片，然后确定浏览器中，一行放多少张图片，其中用到了
getChildElement函数来获得容器中图片的个数，具体代码如下：
//获得图片的个数
function getChildElement(parent,content){
var contenArr=[];//定义一个数组contenArr
var allContent = parent.getElementsByTagName("*");//获得父元素下的所有元素
for(var i=0;i<allContent.length;i++){
if(allContent[i].className==content){
contenArr.push(allContent[i]);
}
}
return contenArr;
}
- 确定好了一行放多少张图片之后，就要确定一排中高度最小的那张图片，以便确定超出列数之后的第一张图片的位置，这里面用了一个
for循环，遍历容器中的图片，如果没有超出一行放图片的个数，就只存入一行的高度到数组BoxHeightArr中，当超出的时候，首先用Math.min.apply(null,BoxHeightArr);求出一行中图片的最小高度，然后通过getminheightLocation函数获得最小高度图片的位置索引，具体代码如下：
/得到高度最小图片的位置
function getminheightLocation(BoxHeightArr,minHeight){
for(var i=0;i<BoxHeightArr.length;i++){
if(BoxHeightArr[i]==minHeight){
return i;
}
}
}
- 最后就将超出列数之后的第一张图片放到高度最小图片的下面，具体方法如下
ccontent[i].style.position="absolute";
ccontent[i].style.top=minHeight+"px";
ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
值得注意的是，放完图片之后必须要更新高度最小图片的新高度，加上了新加入的图片高度。BoxHeightArr[minIndex]=BoxHeightArr[minIndex]+ccontent[i].offsetHeight
这样就完成了瀑布流的效果，接下来就要实现下拉动态加载图片，首先需要绑定一个监听滚动条的事件，具体代码如下：
//监听滚动条
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="imgBox";
ccontent.appendChild(boximg);
var img=document.createElement("img");
img.src="images/"+imgData.data[i].src;
boximg.appendChild(img);
}
imgLocation("container","box");//对新加入的图片继续调用imgLocation函数
}
}
首先通过checkFlag("container","box")判断，是否到达最后一张图片，具体代码如下：
window.onload=function(){
imgLocation("container","box");
}
function checkFlag(parent,content){
var cparent=document.getElementById(parent);
var ccontent=getChildElement(cparent,content);
var lastContentHeight=ccontent[ccontent.length-1].offsetTop;//得到最后一张图片的顶部高度
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;//得到滚动的高度
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;//得到屏幕的高度
if(scrolltop+pageHeight>lastContentHeight){
return true;
}
}
-
lastContentHeight的值是最后一张图片距离顶部的高度，scrolltop的值是滚动的高度，就是当前显示页面之前隐藏的部分，pageHeight就是当前可见页面的高度，如果scrolltop加上pageHeight大于lastContentHeight，就返回true，这个很好理解。
判断完了，到达最后一张图片之后，就要动态添加图片，这里用到了JSON数据格式，具体代码如下：
var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"}]};
根据imgData对象中的data属性的个数，创建对应的类名为imgBox和Box的div标签，然后将标签插入到container容器中。最后只得注意的是，加载完了7张照片之后，要对新加入的图片继续调用imgLocation函数进行定位，否则不会有瀑布流的效果
