首页 > 其他 > 详细

masonry插件和infinitescroll插件实现无刷新无分页完美瀑布流

时间：2014-04-02 12:36:56      阅读：481      评论：0      收藏：0      [点我收藏+]

bubuko.com,布布扣

如果你善于发现美，如果你善于观察新鲜的事物，如果你是一名有爱的前端攻城师或设计尸，那么你一定不会对下面图片中的结构感到陌生。没错，这就是现在很火的瀑布流。也称砌墙效果。就是这种不稳定结构，就是这种交错之美，震撼着每个浏览者的视神经。对于习惯了传统条条框框布局的读者来说，这种方式无疑会让他们的鼠标自由摇摆…

实现这个效果需要两个jQuery插件infinite-scroll和Masonry。

 

 

参数详解：

 

 $(‘#content‘).infinitescroll({
  navSelector  : "div.navigation", //导航的选择器，会被隐藏
  nextSelector : "div.navigation a:first",//包含下一页链接的选择器
  itemSelector : "#content div.post",//你将要取回的选项(内容块)
  debug : true, //启用调试信息
  loadingImg   : "/img/loading.gif", //加载的时候显示的图片
  //默认采用："http://www.infinite-scroll.com/loading.gif"
  animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
  extraScrollPx: 50, //滚动条距离底部多少像素的时候开始加载，默认150
  bufferPx : 40,//载入信息的显示时间，时间越大，载入信息显示时间越短
  errorCallback: function(){},//当出错的时候，比如404页面的时候执行的函数
  localMode : true //是否允许载入具有相同函数的页面，默认为false
  },function(arrayOfNewElems){
  //程序执行完的回调函数
});

 

取消绑定事件的函数写法：$(window).unbind(‘.infscr’); 通过事件触发加载数据的写法： $(document).trigger(‘retrieve.infscr’); //比如加到某个click事件中

 

此插件还有一个鲜为人知的功能就是可以载入任何页面的选择器中的内容，可以是id以及是class，并转化到html存储。要比jquery自带的的load强大多了。

 

$(‘‘).load(‘/page/2/ #content div.post‘,function(){
$(this).appendTo(‘#content‘);
});

 

参数详解：

 

$(function(){
 $(?#container?).masonry({
 // options 设置选项
 itemSelector : ?.item?, //子类元素选择器
 columnWidth : 240 ,//一列的宽度 ，包括边距 220+10+10
 isAnimated:true, //使用jquery的布局变化，是否启用动画效果
 animationOptions:{
 //jquery animate属性 ，动画效果选项。比如渐变效果 Object { queue: false, duration: 500 }
 },
 gutterWidth:0,//列的间隙
 isFitWidth:true,//自适应宽度
 isResizableL:true,// 是否可调整大小
 isRTL:false,//使用从右到左的布局
 });
 });

 

合并效果

XML/HTML code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--容器代码-->
<div id="container">
 
    <div class="waterfall">
        <a href=""><img alt="" src="images/P (1).jpg"></a>
        <p>精致体验：LOFTER追求精致入微的视觉和交互体验，为每一片内容精心度量，让你的视角所触及的每一个像素，都蕴含独具匠心的精致设计。</p>
    </div>
    <div class="waterfall">
        <a href=""><img alt="" src="images/P (1).jpg"></a>
        <p>精致体验：LOFTER追求精致入微的视觉和交互体验，为每一片内容精心度量，让你的视角所触及的每一个像素，都蕴含独具匠心的精致设计。</p>
    </div>
 
    <!-- 还有好多。。。省略了。。。 -->
   
</div>
 
<!--分页代码-->
<div class="navigation" id="pnavigation">
     <a href="page/2.html">下一页</a>
</div>

CSS代码：

CSS code?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#container { position: relative; margin:0px auto; padding:15px 10px; }
.waterfall {
    position: absolute;
    top:1000px;  
    left:-1000px;
    border: 1px solid #DFDFDF;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 10px;
    background-color: #FFF;
    width:192px;
    margin-top:15px;
    -webkit-transition: left .3s ease-in-out,top .3s ease-in-out;
       -moz-transition: left .5s ease-in-out,top .5s ease-in-out;
         -o-transition: left .3s ease-in-out,top .3s ease-in-out;
            transition: left .3s ease-in-out,top .3s ease-in-out;
}
.navigation { display:none; padding:10px 0px; text-align:center; }
.navigation a { display:inline-block; padding:2px 5px; border:1px solid #999; background
JavaScript 代码：
 
 
JavaScript code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="js/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
  $(function(){
     
    var $container = $(‘#container‘);
     
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: ‘.waterfall‘,
        gutterWidth:15,
        isFitWidth:true,
        isResizableL:true,
        columnWidth: 214
      });
    });
     
    $container.infinitescroll({
      navSelector  : ‘#pnavigation‘,    // selector for the paged navigation 
      nextSelector : ‘#pnavigation a‘,  // selector for the NEXT link (to page 2)
      itemSelector : ‘.waterfall‘,     // selector for all items you‘ll retrieve
      loading: {
          finishedMsg: ‘No more pages to load.‘,
          img: ‘http://i.imgur.com/6RMhx.gif‘
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they‘re ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( ‘appended‘, $newElems, true ); 
        });
      }
    );
     
  });
 
</script>

详细的例子和下载两个JS的网址：http://yunpan.cn/QIWZShkkQqmem

在这个文件夹里面有两个案例，第一个案例里面要链接到数据库才能看到大致的效果，其中：

之后在网页头自己写一个js脚本

  1. <script>  
  2. $(document).ready(function (){  
  3.   $("#container").infinitescroll({  
  4.         navSelector: "#navigation",      //页面分页元素--本页的导航，意思就是一个可以触发ajax函数的模块  
  5.         nextSelector: "#navigation a",  //下一页的导航  
  6.         itemSelector: ".scroll " ,             //此处我用了类选择器，选择的是你要加载的那一个块（每次载入的数据放的地方）        
  7.         animate: true,                          //加载时候时候需要动画，默认是false  
  8.         maxPage: 3,                            //最大的页数，也就是滚动多少次停。这个页码必须得要你从数据库里面拿         
  9.     });  
  10. });   
  11.    </script>  

 3.或许你看到这里还是不太清楚网页怎么定义，这里给出我的demo，希望可以有帮助

 

  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="utf-8"%>  
  3. <!DOCTYPE html>  
  4. <html>  
  5. <head>  
  6. <meta charset="utf-8">  
  7. <title>无限翻页效果</title>  
  8. <script src="css/infinite-scroll/jquery-1.6.4.js"></script>  
  9. <script src="css/infinite-scroll/jquery.infinitescroll.js"></script>  
  10. <script src="css/infinite-scroll/test/debug.js"></script>  
  11.  <script>  
  12.  $(document).ready(function (){               //别忘了加这句，除非你没学Jquery  
  13.       $("#container").infinitescroll({  
  14.             navSelector: "#navigation",     //页面分页元素--成功后自动隐藏  
  15.             nextSelector: "#navigation a",  
  16.             itemSelector: ".scroll " ,             
  17.             animate: true,  
  18.             maxPage: 3,                                                  
  19.         });  
  20.  });   
  21.     </script>  
  22. </head>  
  23. <body>  
  24.     <div id="container">            <!-- 容器 -->  
  25.         <div class="scroll">         <!-- 每次要加载数据的数据块-->  
  26.         第一页内容第一页内容<br>  
  27.         第一页内容<br>第一页内容<br>第一页内容<br>  
  28.         第一页内容<br>第一页内容<br>第一页内容<br>  
  29.         第一页内容<br>第一页内容<br>第一页内容  
  30.         </div>  
  31.     </div>  
  32.         <div id="navigation" align="center">         <!-- 页面导航-->  
  33.         <a href="user/list?page=1"></a>        <!-- 此处可以是url，可以是action，要注意不是每种html都可以加，是跟当前网页有相同布局的才可以。另外一个重要的地方是page参数，这个一定要加在这里，它的作用是指出当前页面页码，没加载一次数据，page自动+1,我们可以从服务器用request拿到他然后进行后面的分页处理。-->  
  34.     </div>  
  35. </body>  
  36. </html>  

 1.js函数里还可定义的其他属性:

 

  1. debug        : true,                                         //用于调试，如果需要用到，只需在网页头引入官网demo里的debug.js文件                  
  2. loadingImg   : "/img/loading.gif",                   //加载时候显示的进度条，用户可以自定义       
  3. loadingText  : "Loading new posts...",            //加载时显示的文字     
  4. extraScrollPx: 50,                                            //离网页底部多少像素时触发ajax  
  5. donetext     : "I think we‘ve hit the end, Jim" ,     //加载完数据(到达底部时)显示的文字提醒  
  6. errorCallback: function(){},                           

masonry插件和infinitescroll插件实现无刷新无分页完美瀑布流,布布扣,bubuko.com

masonry插件和infinitescroll插件实现无刷新无分页完美瀑布流

原文：http://www.cnblogs.com/chenguiya/p/3636243.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！