瀑布流的实现和无限拖代码演示

昨天介绍了来自迅雷CUED在瀑布流方面的一些探讨，今天具体谈一些其中的细节，本文使用jquery.isotope来实现重整排列，即形如瀑布流，该插件不仅可以实现瀑布流排列方式，还有一些变化的动态效果。

下载所有代码 代码中有两个文件夹，pubuliu/为本文所要讲的文件夹代码。

第一步：HTML代码部署 ↑

<div id="main">
<div id="content">
<div class="box">
<img src="img/P_000.jpg" />
<p>标题党啦</p>
</div>
<div class="box"><img src="img/P_001.jpg" /></div>
<div class="box"><img src="img/P_002.jpg" /></div>
<div class="box"><img src="img/P_003.jpg" /></div>
<div class="box"><img src="img/P_004.jpg" /></div>
<div class="box"><img src="img/P_005.jpg" /></div>
<div class="box"><img src="img/P_006.jpg" /></div>
<div class="box"><img src="img/P_007.jpg" /></div>
<div class="box"><img src="img/P_008.jpg" /></div>
<div class="box"><img src="img/P_009.jpg" /></div>
<div class="box"><img src="img/P_010.jpg" /></div>
<div class="box"><img src="img/P_011.jpg" /></div>
<div class="box"><img src="img/P_012.jpg" /></div>
</div>
<div id="nextpage">
<a href="index.html">下一页</a>
</div>
<div id="loading">
<span>给力加载中……</span>
</div>
</div>

上面的代码有三部分：1、要实现瀑布流的盒子#content；2、下一页链接#nextpage；3、提示信息#loading。

第二步：Jquery代码部署 ↑

<script src="js/jquery.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script>
$(function(){
?? ?var $content_box=$('#content');
?? ?var $thumb_box=$('#content .box');
?? ?var $next_page=$('#nextpage a').attr('href');
?? ?$content_box.imagesLoaded(function(){
?? ??? ?$(this).isotope({
?? ??? ??? ?itemSelector:'.box',
?? ??? ??? ?layoutMode:'masonry'
?? ??? ?});
?? ?});
?? ?$(window).bind('scroll',function(){
?? ??? ?if($(document).scrollTop()+$(window).height()>$(document).height()-10){
?? ??? ??? ?if($next_page!=undefined){
?? ??? ??? ??? ?$.ajax({
?? ??? ??? ??? ??? ?url:$next_page,
?? ??? ??? ??? ??? ?type:'GET',
?? ??? ??? ??? ??? ?dataType:'html',
?? ??? ??? ??? ??? ?success:function($data){
?? ??? ??? ??? ??? ??? ?$result=$($data).find('#content .box');
?? ??? ??? ??? ??? ??? ?$next_page=$($data).find('#nextpage a').attr('href');
?? ??? ??? ??? ??? ??? ?$('#content').append($result);
?? ??? ??? ??? ??? ??? ?var $new_elemt=$result.css({opacity:0});
?? ??? ??? ??? ??? ??? ?$new_elemt.imagesLoaded(function(){
?? ??? ??? ??? ??? ??? ??? ?$new_elemt.animate({opacity:1},600);
?? ??? ??? ??? ??? ??? ??? ?$content_box.isotope('appended',$new_elemt,true);
?? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ??? ?$('#nextpage a').attr('href',$next_page);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?});
?? ??? ??? ?}else{
?? ??? ??? ??? ?$next_page=undefined;
?? ??? ??? ?}
?? ??? ?}
?? ?});
});
</script>

其中的最核心部分是

$content_box.imagesLoaded(function(){
?? ?$(this).isotope({
?? ??? ?itemSelector:'.box',
?? ??? ?layoutMode:'masonry'
?? ?});
});

默认情况下装载成瀑布流

var $new_elemt=$result.css({opacity:0});
$new_elemt.imagesLoaded(function(){
$new_elemt.animate({opacity:1},600);
$content_box.isotope('appended',$new_elemt,true);

ajax加载下一页之后重整瀑布流，这里最为关键，关系着所有成败，特别是var $new_elemt=$result 一句，绝对不能马虎。

第三步：调整CSS ↑

<style>
html,body{margin:0;padding:0;}
#container{width:90%;margin:0 auto;}
.box{margin:1em;}
#nextpage{display:none; }
#loading{clear: both; text-align: center;padding:4em 0;}
footer{padding:4em 0;}
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {z-index: 2;}
.isotope-hidden.isotope-item {pointer-events: none;z-index: 1;}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {-webkit-transition-duration: 0.8s;-moz-transition-duration: 0.8s;transition-duration: 0.8s;}
.isotope {-webkit-transition-property: height, width;-moz-transition-property: height, width;transition-property: height, width;}
.isotope .isotope-item {-webkit-transition-property: -webkit-transform, opacity;-moz-transition-property: -moz-transform, opacity;transition-property: transform, opacity;}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {-webkit-transition-duration: 0s;-moz-transition-duration: 0s;transition-duration: 0s;}
/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {-webkit-transition: none;-moz-transition: none;transition: none;}
</style>

在谷歌之后，有人说插件的css需要这样去控制，所以将css全部贴出来了，读者自己去删减。

上面的代码完全实现了本文要的功能，然而有一件事必须做出提示，在IE下ajax加载比较慢，不知为何，竟然会在第二次瀑布重整时加载出三个相同的下一页，可能是代码中某个控制的问题，待高手解决。