首页 > 代码库 > Jquery瀑布流效果（下篇）
Jquery瀑布流效果（下篇）
接着上篇瀑布流效果说（上篇地址为http://www.cnblogs.com/jiaojiaome/articles/4123586.html）。
第一个文件myself实现了瀑布流的效果，但是存在可以优化的地方。
比如initial方法，第一次刚加载的时候调用initial方法从第一张慢慢布局是没有问题的。
but,后面拖动滚动后，如果满足条件，继续加载其他的，加载毕后再次调用initial()方法，
这里是可以优化的，因为之前的元素已经布局好了，不需要重新布局。所以可以从后面的元素开始
本篇遂是优化后的结果。
所以优化了下initial方法，给它一个参数，如果参数存在就布局参数里的元素，否则则布局$("#wrap .box").
代码如下：
<!DOCTYPE html><html ><head><meta charset="gb2312" /><title>myself瀑布流效果———优化后</title><script type="text/javascript" src="../js/jquery.js"></script><style type="text/css">#wrap{position:relative;}#wrap .box { float: left; height: auto; padding: 10px; width: 280px;}#wrap .box .info { background:none #fff; border-radius: 8px; box-shadow: 0 0 11px #666666; height: auto; width: 280px;}#wrap .box .info .pic { height: auto; margin: 0 auto; padding-top: 10px; width: 260px;}#wrap .box .info .pic img { border-radius: 3px; width: 260px;}#wrap .box .info .title { color: #666; font-size: 18px; font-weight: bold; height: 40px; line-height: 40px; margin: 0 auto; overflow: hidden; text-align: center; width: 260px;}#wrap .box .info .title a{color:#444;text-decoration:none;}</style></head><body> <div id="wrap"> <div class="box"> <div class="info"> <div class="pic"><img src="images/1.jpg"></div> <div class="title"><a href="http://www.sucaijiayuan.com">素材家园-sucaijiayuan.com</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="images/2.jpg"></div> <div class="title"><a href="http://www.sucaijiayuan.com">素材家园-sucaijiayuan.com</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="images/3.jpg"></div> <div class="title"><a href="http://www.sucaijiayuan.com">素材家园-sucaijiayuan.com</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="images/4.jpg"></div> <div class="title"><a href="http://www.sucaijiayuan.com">素材家园-sucaijiayuan.com</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="images/5.jpg"></div> <div class="title"><a href="http://www.sucaijiayuan.com">素材家园-sucaijiayuan.com</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="images/6.jpg"></div> <div class="title"><a href="http://www.sucaijiayuan.com">素材家园-sucaijiayuan.com</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="images/7.jpg"></div> <div class="title"><a href="http://www.sucaijiayuan.com">素材家园-sucaijiayuan.com</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="images/8.jpg"></div> <div class="title"><a href="http://www.sucaijiayuan.com">素材家园-sucaijiayuan.com</a></div> </div> </div><div class="box"> <div class="info"> <div class="pic"><img src="images/9.jpg"></div> <div class="title"><a href="http://www.sucaijiayuan.com">素材家园-sucaijiayuan.com</a></div> </div> </div> <div class="box"> <div class="info"> <div class="pic"><img src="images/10.jpg"></div> <div class="title"><a href="http://www.sucaijiayuan.com">素材家园-sucaijiayuan.com</a></div> </div> </div> </div></body> <script type="text/javascript"> /*第一个文件myself实现了瀑布流的效果，但是存在可以优化的地方。 比如initial方法，第一次刚加载的时候调用initial方法从第一张慢慢布局是没有问题的。 but,后面拖动滚动后，如果满足条件，继续加载其他的，加载毕后再次调用initial()方法， 这里是可以优化的，因为之前的元素已经布局好了，不需要重新布局。所以可以从后面的元素开始 本篇遂是优化后的结果。*/ var hArray=[]; var datas=[{"src":"1.jpg","txt":"美女图片1"}, {"src":"2.jpg","txt":"美女图片2"}, {"src":"3.jpg","txt":"美女图片3"}, {"src":"4.jpg","txt":"美女图片4"}, {"src":"5.jpg","txt":"美女图片5"}, {"src":"6.jpg","txt":"美女图片6"}, {"src":"7.jpg","txt":"美女图片7"}, {"src":"8.jpg","txt":"美女图片8"}, {"src":"9.jpg","txt":"美女图片9"}, {"src":"10.jpg","txt":"美女图片10"}]; initial(); /*$("window").on("load",function(){ //首次布局 initial(); })*/ $(window).scroll(function(){ if(scrollCommanded()){ var objArr=[]; for(var i=0;i<30;i++){ var index=Math.floor(Math.random()*10);//产生1到9的随机数 var box=document.createElement("div"); box.className="box"; var info=document.createElement("div"); info.className="info"; var pic=document.createElement("div"); pic.className="pic"; var img=document.createElement("img"); img.src="images/"+datas[index].src; pic.appendChild(img); var title=document.createElement("div"); title.className="title"; title.innerHTML=‘<a href="http://www.mamicode.com/#">‘+datas[index].txt+‘</a>‘; info.appendChild(pic); info.appendChild(title); box.appendChild(info); document.getElementById("wrap").appendChild(box); objArr.push(box); } initial(objArr); } }) //判断是否具备滚动的条件 function scrollCommanded(){ var last=$("#wrap .box").last(); if($(window).height()+$(window).scrollTop()>last.offset().top+Math.floor(last.outerHeight()/2)){ return true; } return false; } //初始化布局 function initial(objArra){ var boxes=objArra||$("#wrap .box"), boxW=objArra?boxes[0].offsetWidth:boxes.eq(0).outerWidth(), cols=Math.floor($(window).width()/boxW); $("#wrap").width(cols*boxW).css("margin","0 auto"); if(hArray.length==0){ boxes.each(function(index,value){ if(index<cols){ hArray.push($(value).outerHeight()); }else{ var minH=Math.min.apply(null,hArray); var minIndex=$.inArray(minH,hArray); $(value).css({ "position":"absolute", "top":minH, "left":minIndex*boxW} ); hArray[minIndex]+=$(value).outerHeight(); } }) }else{ $(boxes).each(function(index,value){ var minH=Math.min.apply(null,hArray); var minIndex=$.inArray(minH,hArray); $(value).css({ "position":"absolute", "top":minH, "left":minIndex*boxW} ); hArray[minIndex]+=$(value).outerHeight(); }) } }</script></html>
完结了。
Jquery瀑布流效果（下篇）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。