接着上篇瀑布流效果说（上篇地址为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="#">'+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>
完结了。