Masonry+Infinite-Scroll實現無刷新無分頁完美瀑布流(轉)

1、Masonry

 

是基於Jquery插件，用於對CSS佈局的可移動層進行從新佈局。Masonry願意石工，能夠這樣形象的理解，頁面上不少大小不一的移動層能夠想象成散亂的石頭，通過Masonry這個石工處理後，變成一堵美觀的牆。

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

 

2、Infinite Scroll

是基於Infinite Scroll也是基於Jquery插件，用於當滾動條滾動時追加頁面內容，有網友稱這種效果爲」無刷新無分頁完美瀑布流」展示方式。

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

 

3、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>