为了账号安全,请及时绑定邮箱和手机立即绑定

求赐个大神帮帮忙修改下瀑布流的代码T^T

求赐个大神帮帮忙修改下瀑布流的代码T^T

慕姐0693551 2015-11-07 16:00:53
求赐个大神帮帮忙修改下瀑布流的代码T^T求大神们帮帮忙~
查看完整描述

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;}


查看完整回答
反对 回复 2015-11-10
?
慕姐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>


查看完整回答
反对 回复 2015-11-10
?
慕姐0693551

TA贡献7条经验 获得超0个赞

//img1.sycdn.imooc.com//563ea7bb0001870508390652.jpg

就是拉动到这里就开始加载了T^T

查看完整回答
反对 回复 2015-11-08
?
李晓健

TA贡献1036条经验 获得超461个赞

你的代码呢?

查看完整回答
反对 回复 2015-11-07
  • 慕姐0693551
    慕姐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
    慕姐0693551
    大神这是JQ部分的,滚轮总是在拉到中间就开始加载图片了,我想在底部才开始加载,求大神看看T^T
  • 4 回答
  • 0 关注
  • 1512 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信