var scrollH = document.documentElement.scrollTop || document.body.scrollTop;
return documentH+scrollH>=getLastH() ?true:false;
}
/**
* 获得最后一个box所在列的高度
*/
function getLastH(){
var wrap = document.getElementById(‘wrap’);
var boxs = getClass(wrap,’box’);
return boxs[boxs.length-1].offsetTop+boxs[boxs.length-1].offsetHeight;
}
/**
* 设置加载样式
* @param box [obj] 设置的Box
* @param top [Num] box的top值
* @param left [Num] box的left值
* @param index [Num] box的第几个
*/
var getStartNum = 0;//设置请求加载的条数的位置
function getStyle(box,top,left,index){
if (getStartNum>=index) return;
$(box).css({
‘position’:’absolute’,
‘top’:top,
“left”:left,
“opacity”:”0″
});
$(box).stop().animate({
“opacity”:”1″
},999);
getStartNum = index;//更新请求数据的条数位置
}
</script>
</head>
<body>
<section id=”title”>
<h2>瀑布流效果的学习</h2>By Smile.
</section>
<div id=”wrap”>
<div class=”box”>
<div class=”info”>
<div class=”pic”><img src=”/jscss/demoimg/201312/1.jpg”></div>
<div class=”title”><a href=”#”>图片标题</a></div>
</div>
</div>
<div class=”box”>
<div class=”info”>
<div class=”pic”><img src=”/jscss/demoimg/201312/2.jpg”></div>
<div class=”title”><a href=”#”>图片标题</a></div>
</div>
</div>
<div class=”box”>
<div class=”info”>
<div class=”pic”><img src=”/jscss/demoimg/201312/3.jpg”></div>
<div class=”title”><a href=”#”>图片标题</a></div>
</div>
</div>
<div class=”box”>
<div class=”info”>
<div class=”pic”><img src=”/jscss/demoimg/201312/4.jpg”></div>
<div class=”title”><a href=”#”>图片标题</a></div>
</div>
</div>
<div class=”box”>
<div class=”info”>
<div class=”pic”><img src=”/jscss/demoimg/201312/5.jpg”></div>
<div class=”title”><a href=”#”>图片标题</a></div>
</div>
</div>
