昨天介绍了来自迅雷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加载比较慢,不知为何,竟然会在第二次瀑布重整时加载出三个相同的下一页,可能是代码中某个控制的问题,待高手解决。
因为是织梦的程序,改编码稍微有些麻烦,数据库什么的都要改。
都试过了,没用哦,jquery.min.js,这里面的也改过,也还是不行
一般网上的说法都是按照你的这种方式改,但是还应该考虑,你的网页本身就是gb2312,那么你是否可以尝试charset=gb2312,或者修改你的网页charset或文件编码格式
我的网站是gb2312格式的,加载第二页的是乱码,这个应该是ajax编码不统一的问题
contentType:’application/x-www-form-urlencoded; charset=UTF-8′,
但是改这个也没用啊,具体有什么方法可以实现吗?
看一下效果再说