Masonry+Infinite-Scroll实现无刷新无分页完美瀑布流

一、Masonry

 

是基于Jquery插件，用于对CSS布局的可移动层进行重新布局。Masonry愿意石工，可以这样形象的理解，页面上很多大小不一的移动层可以想象成散乱的石头，经过Masonry这个石工处理后，变成一堵美观的墙。

         官网地址：http://masonry.desandro.com

 

二、Infinite Scroll

是基于Infinite Scroll也是基于Jquery插件，用于当滚动条滚动时追加页面内容，有网友称这种效果为”无刷新无分页完美瀑布流”展现方式。

官网地址：http://infinite-scroll.com/

 

三、Maonsry+Infinite-Scroll实现滚动式分页

在Masonry的Example里有自动的与infinite-scroll结合的实现滚动式分页的例子，地址在这里http://masonry.desandro.com/demos/infinite-scroll.html。

实际上这个例子还是有点粗糙，如果打开浏览器的开发者工具进行脚本跟踪，会发现翻到第5页后会出现404加载出错，到github下载整个project，可以看到目录pages下有2.html,3.html,4.html,5.html。Infinite-Scroll默认会往下翻，找不到6.html后报错。而且这个翻页的例子是生成了静态的html。我这里只贴出实现一个动态分页的实现代码（只是其中一个解决办法），希望能起到抛砖引玉的作用，希望有网友分享更加完美的代码。

代码采用Freemarker模板语言实现,代码片断：

   

 

 <script type="text/javascript" src="/js/jquery/ jquery.1.7.1.min.js"></script>
         <script type="text/javascript" src="/js/jquery/plugin/jquery.masonry.min.js"></script>
         <script type="text/js" src="/scripts/jquery/plugin/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
    var totalpage = ${result.totalPage};//这里是从服务端得到总共分页数
        var readedpage = 1;//当前滚动到的页数
</script>
<!-- page-nav 创建一个不可见对象，用于载入下一页数据入口元素点 -->
<nav id="page-nav">
  <a href="${media_root}/billstudy/bill/question/all/null/1"></a>
</nav>
<div id="bills_main">
 
   <div id="masonid" class="bills_conright">
<#if result?exists && (result.data.size() gt 0)>
   <#list result.data as template>
          <div class="bills_piccon">
                       //这里是每条数据的内容
          </div>
    </#list>
</#if>
</div>
 <div class="clear"></div>
</div>
 
<script>
  $jq(function(){
    var $container = $jq('#masonid');
    readedpage++;
        if(totalpage>1){//如果总共只有一页，那就不需要滚动加载效果了
                 $jq("#page-nav a").attr("href","/billstudy/bill/question/all/null/"+readedpage);
        $container.imagesLoaded(function(){
      $container.masonry({
       // itemSelector: '.bills_piccon'
       // ,        columnWidth: 100
      });
    });//这里参数可以为空，但必须要初始化masonry，否则后面会报找不到方法appended。
   
    $container.infinitescroll({
      navSelector  : '#page-nav',    //指定page-nav
      nextSelector : '#page-nav a',  // page-nav下一页的链接
      itemSelector : '.bills_piccon',     // 要获取追加的页面元素
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif'
        }
      },
     // pathParse: ["/billstudy/bill/question/all/null/", ""],
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $jq( 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);
          readedpage++;//当前页滚动完后，定位到下一页
          if(readedpage>totalpage){//如果滚动到超过最后一页，置成不要再滚动。
                $jq("#page-nav").remove();
                $container.infinitescroll({state:{isDone:true}});
          }else{
             //'#page-nav a置成下一页的值
               $jq("#page-nav a").attr("href","/billstudy/bill/question/all/null/"+readedpage);
          }
        });
      }
);
}
   
  });
</script>

 

 

评论

2 楼 benjeman 2015-01-08  

<nav id="page-nav">，第一次加载成功后，就一直会加载这个，不会变成递增页面是怎么回事

1 楼 Jgenius 2013-09-06  

你这样控制有点麻烦infinitescroll 有个参数
maxPage: 1,  //最大的页数，也就是滚动多少次停。这个页码必须得要你从数据库里面拿 ，但是我还有个问题，你如果要给你这个分页加载一定好，再做个分页功能怎么弄