猿问

求大神看看瀑布流滚动问题T^T

滚动条滚动到中间就开始加载了,我想是在底部才开始加载,求大神看看代码,该怎么改动,感激不尽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;
}


慕姐0693551
浏览 1791回答 2
2回答

echo_kinchao

是不是老师给的代码您没有引入完全
随时随地看视频慕课网APP
我要回答