乌徒帮技术范儿技术中心HTML代码 › 瀑布流的实现和无限拖代码演示

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

分类:HTML代码 标签:

昨天介绍了来自迅雷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加载比较慢,不知为何,竟然会在第二次瀑布重整时加载出三个相同的下一页,可能是代码中某个控制的问题,待高手解决。

已有5条评论 快速评论
  1. haozi #2823楼 回复给@2821楼 2012/12/30 21:38:22 回复

    因为是织梦的程序,改编码稍微有些麻烦,数据库什么的都要改。

  2. haozi #2822楼 回复给@2821楼 2012/12/30 21:37:15 回复

    都试过了,没用哦,jquery.min.js,这里面的也改过,也还是不行

  3. 管理员 #2821楼 回复给@2820楼 2012/12/30 16:06:53 回复

    一般网上的说法都是按照你的这种方式改,但是还应该考虑,你的网页本身就是gb2312,那么你是否可以尝试charset=gb2312,或者修改你的网页charset或文件编码格式

  4. haozi #2820楼 2012/12/30 14:59:23 回复

    我的网站是gb2312格式的,加载第二页的是乱码,这个应该是ajax编码不统一的问题
    contentType:’application/x-www-form-urlencoded; charset=UTF-8′,
    但是改这个也没用啊,具体有什么方法可以实现吗?

  5. 好听的歌 #2816楼 2012/12/28 22:45:57 回复

    看一下效果再说

填写个人信息,赶快回复吧!