滾動條滾動到中間就開始加載了,我想是在底部才開始加載,求大神看看代碼,該怎么改動,感激不盡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;
}
求大神看看瀑布流滾動問題T^T
慕姐0693551
2015-11-14 21:20:13