function getminHIndex(arr,minH){
for(var i in arr){
if(arr[i]==minH)return i;
}
}
3：设置窗口滚动事件的监听函数:读取数据添加块框。
复制代码 代码如下:
var dataInt={'data':[{'src':'g (1).jpg'},{'src':'g (9).jpg'},{'src':'g (2).jpg'},{'src':'g (4).jpg'}]};//一个临时的数据对象
//下面定义窗口滚动事件监听函数
window.onscroll=function(){
if(checkscrollside()){
var oParent=document.getElementById('main');// 父级对象
for(var i=0;i<dataInt.data.length;i++){
var oPin=document.createElement('div'); //创建添加 元素节点pin
oPin.className='pin'; //添加 类名 name属性
oParent.appendChild(oPin); //创建添加 子节点box
var oBox=document.createElement('div');
oBox.className='box';
oPin.appendChild(oBox);
var oImg=document.createElement('img');//创建添加 子节点img
oImg.src='./images/'+dataInt.data[i].src;
oBox.appendChild(oImg);
}
waterfall('main','pin');//将①②封装成函数waterfall()，将添加的节点添加到添加和定位到文档中。
};
}
复制代码 代码如下:
function checkscrollside(){
var oParent=document.getElementById('main');
var aPin=getClassObj(oParent,'pin');
var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性
var documentH=document.documentElement.clientHeight;//窗口高度
return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数
}
三、最终效果：
四、总结：此为让自己梳理一下思路，表达不太仔细连贯，仅供参考。
五、完成后的html文件和js文件：
html：index.html
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="who care?" />
<script type="text/javascript" src="https://www.jb51.net/waterfall.js"/></script>
<title></title>
<style type="text/css">
*{padding: 0;margin:0;}
#main{
position: relative;
}
.pin{
padding: 15px 0 0 15px;
float:left;
}
.box{
padding: 10px;
border:1px solid #ccc;
box-shadow: 0 0 6px #ccc;
border-radius: 5px;
}
.box img{
width:162px;
height:auto;
}
</style>
</head>
<body>
<div>
<div>
<div>
<img src="./images/g (1).jpg"/>
</div>
</div>
<div>
<div>
<img src="./images/g (2).jpg"/>
</div>
</div>
<div>
<div>
<img src="./images/g (3).jpg"/>
</div>
</div>
<div>
<div>
<img src="./images/g (4).jpg"/>
</div>
</div>
<div>
<div>
<img src="./images/g (5).jpg"/>
</div>
</div>
</div>
</body>
</html>
js：waterfall.js 1 window.onload=function(){
复制代码 代码如下: