求賜個大神幫幫忙修改下瀑布流的代碼T^T求大神們幫幫忙~
求賜個大神幫幫忙修改下瀑布流的代碼T^T
慕姐0693551
2015-11-07 16:00:53
4 回答
慕姐0693551
TA貢獻7條經驗 獲得超0個贊
/*瀑布流*/
#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;}
慕姐0693551
TA貢獻7條經驗 獲得超0個贊
<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>
-
慕姐0693551$(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大神這是JQ部分的，滾輪總是在拉到中間就開始加載圖片了，我想在底部才開始加載，求大神看看T^T
添加回答
舉報
0/150
提交
取消