滚动条滚动到中间就开始加载了，我想是在底部才开始加载，求大神看看代码，该怎么改动，感激不尽T^T<div id="mian">
<div class="box">
<div class="tu">
<img src="images/ceshi (1).jpg" />
</div>
</div>
<div class="box">
<div class="tu">
<img src="images/ceshi (2).jpg" />
</div>
</div>
<div class="box">
<div class="tu">
<img src="images/ceshi (3).jpg" />
</div>
</div>
<div class="box">
<div class="tu">
<img src="images/ceshi (4).jpg" />
</div>
</div>
<div class="box">
<div class="tu">
<img src="images/ceshi (5).jpg" />
</div>
</div>
<div class="box">
<div class="tu">
<img src="images/ceshi (6).jpg" />
</div>
</div>
<div class="box">
<div class="tu">
<img src="images/ceshi (7).jpg" />
</div>
</div>
<div class="box">
<div class="tu">
<img src="images/ceshi (8).jpg" />
</div>
</div>
<div class="box">
<div class="tu">
<img src="images/ceshi (9).jpg" />
</div>
</div>
<div class="box">
<div class="tu">
<img src="images/ceshi (10).jpg" />
</div>
</div>CSS/*瀑布流*/#mian{position:relative; z-index:998;}.box{padding:10px 0 0 10px; float:left; margin-top:50px;}.tu{padding:1px;}.tu img{width:350px; height:auto;}JQ$(window).on('load',function(){
waterfall();
var dataInt={"data":[{"src":"ceshi (1).jpg"},{"src":"ceshi (2).jpg"},{"src":"ceshi (3).jpg"},{"src":"ceshi (4).jpg"}]};
$(window).on('scroll',function(){
if(checkScrollSlide){
$.each(dataInt.data,function(key,value){
var oBox=$('<div>').addClass('box').appendTo($('#mian'));
var oTu=$('<div>').addClass('tu').appendTo($(oBox));
var oImg=$('<img>').attr('src','images/'+$(value).attr('src')).appendTo($(oTu));
})
waterfall();
}
})
})
function waterfall(){
var $boxs=$('#mian>div');
var w=$boxs.eq(1).outerWidth();
var cols=Math.floor($(window).width()/w);
$('#mian').width(w*cols).css('margin','0 auto');
var hArr=[];
$boxs.each(function(index,value){
var h=$boxs.eq(index).outerHeight();
if(index<cols){
hArr[index]=h;
}else{
var minH=Math.min.apply(null,hArr);
var minHIndex=$.inArray(minH,hArr);
$(value).css({
'position':'absolute',
'top':minH+'px',
'left':minHIndex*w+'px'
})
hArr[minHIndex]+=$boxs.eq(index).outerHeight();
}
})
}
function checkScrollSlide(){
var $lastBox=$('#mian>div').last();
var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/0.96);
var scrllTop=$(window).scrollTop();
if(contentH - viewH - scrollTop <= 100);
var documentH=$(window).height();
return (lastBoxDis<scrollTop+documentH)?true:false;
}
添加回答
举报
0/150
提交
取消