JavaScript Infinite scroll & Masonry

 1 // infinitescroll() is called on the element that surrounds 
 2 // the items you will be loading more of
 3   $('#content').infinitescroll({
 4  
 5     navSelector  : "div.navigation",            
 6                    // selector for the paged navigation (it will be hidden)
 7     nextSelector : "div.navigation a:first",    
 8                    // selector for the NEXT link (to page 2)
 9     itemSelector : "#content div.post"          
10                    // selector for all items you'll retrieve
11   });

 1 // usage:
 2 // $(elem).infinitescroll(options,[callback]);
 3  
 4 // infinitescroll() is called on the element that surrounds 
 5 // the items you will be loading more of
 6 $('#content').infinitescroll({
 7  
 8   navSelector  : "div.navigation",            
 9                  // selector for the paged navigation (it will be hidden)
10  
11   nextSelector : "div.navigation a:first",    
12                  // selector for the NEXT link (to page 2)
13  
14   itemSelector : "#content div.post",          
15                  // selector for all items you'll retrieve
16  
17   debug        : true,                        
18                  // enable debug messaging ( to console.log )
19  
20   loadingImg   : "/img/loading.gif",          
21                  // loading image.
22                  // default: "http://www.infinite-scroll.com/loading.gif"
23  
24   loadingText  : "Loading new posts...",      
25                  // text accompanying loading image
26                  // default: "<em>Loading the next set of posts...</em>"
27  
28   animate      : true,      
29                  // boolean, if the page will do an animated scroll when new content loads
30                  // default: false
31  
32   extraScrollPx: 50,      
33                  // number of additonal pixels that the page will scroll 
34                  // (in addition to the height of the loading div)
35                  // animate must be true for this to matter
36                  // default: 150
37  
38   donetext     : "I think we've hit the end, Jim" ,
39                  // text displayed when all items have been retrieved
40                  // default: "<em>Congratulations, you've reached the end of the internet.</em>"
41  
42   bufferPx     : 40,
43                  // increase this number if you want infscroll to fire quicker
44                  // (a high number means a user will not see the loading message)
45                  // new in 1.2
46                  // default: 40
47  
48   errorCallback: function(){},
49                  // called when a requested page 404's or when there is no more content
50                  // new in 1.2                   
51  
52   localMode    : true
53                  // enable an overflow:auto box to have the same functionality
54                  // demo: http://paulirish.com/demo/infscr
55                  // instead of watching the entire window scrolling the element this plugin
56                  //   was called on will be watched
57                  // new in 1.2
58                  // default: false
59  
60     },function(arrayOfNewElems){
61  
62      // optional callback when new content is successfully loaded in.
63  
64      // keyword `this` will refer to the new DOM content that was just added.
65      // as of 1.5, `this` matches the element you called the plugin on (e.g. #content)
66      //                   all the new elements that were found are passed in as an array
67  
68 });

1 // load all post divs from page 2 into an off-DOM div
2 $('
3 ').load('/page/2/ #content div.post',function(){ 
4     $(this).appendTo('#content');    // once they're loaded, append them to our content area
5 });

 

 Infinite scroll 中文註釋

 1             $('#waterfall').infinitescroll({
 2                 navSelector: "#navigation", //導航的選擇器，會被隱藏
 3                 nextSelector: "#navigation a", //包含下一頁連接的選擇器
 4                 itemSelector: ".wfc", //你將要取回的選項(內容塊)
 5                 debug: true, //啓用調試信息
 6                 animate: true, //當有新數據加載進來的時候，頁面是否有動畫效果，默認沒有
 7                 extraScrollPx: 150, //滾動條距離底部多少像素的時候開始加載，默認150
 8                 bufferPx: 40, //載入信息的顯示時間，時間越大，載入信息顯示時間越短
 9                 errorCallback: function() {
10                     alert('error');
11                 }, //當出錯的時候，好比404頁面的時候執行的函數
12                 localMode: true, //是否容許載入具備相同函數的頁面，默認爲false
13                 dataType: 'html',//能夠是json
14 //                template: function(data) {
15 //                    //data表示服務端返回的json格式數據，這裏須要把data轉換成瀑布流塊的html格式，而後返回給回到函數
16 //                    return '';
17 //                },
18                 loading: {
19                     msgText: "加載中...",
20                     finishedMsg: '沒有新數據了...',
21                     selector: '.loading' // 顯示loading信息的div
22                 }
23             }, function(newElems) {
24                 //程序執行完的回調函數
25                 var $newElems = $(newElems);
26                 $('.wrapper:eq(1)').masonry('appended', $newElems);
27             });

 Masonry 中文註釋

 1 $(function(){
 2  $('#container').masonry({
 3  // options 設置選項
 4  itemSelector : '.item', //子類元素選擇器
 5  columnWidth : 240 ,//一列的寬度 ，包括邊距 220+10+10
 6  isAnimated:true, //使用jquery的佈局變化，是否啓用動畫效果
 7  animationOptions:{
 8  //jquery animate屬性 ，動畫效果選項。好比漸變效果 Object { queue: false, duration: 500 }
 9  },
10  gutterWidth:0,//列的間隙
11  isFitWidth:true,//自適應寬度
12  isResizableL:true,// 是否可調整大小
13  isRTL:false,//使用從右到左的佈局
14  });
15  }); 

Masonry & Infinite scroll 聯合使用

 1 $(function(){
 2 var $container = $('#content ul'); //設置容器
 3 $('#content ul').infinitescroll({   
 4     navSelector  : "div.page .pages",  //導航的選擇器
 5     nextSelector : "div.page .pages a.nextpage",  //包含下一頁連接的選擇器
 6     itemSelector : "#content ul li"  //你將要取回的選項(內容塊)
 7   }, function( newElements ) {
 8   //程序執行完的回調函數
 9   var $newElems = $( newElements );
10   $container.masonry( 'appended', $newElems );
11   });
12    $('#content').masonry({
13     itemSelector : '#content li', //子類元素
14     columnWidth : 251 //一列的寬度
15   });
16 });

 

當須要排列圖片div時：
須要調用：
<script>
var $container = $('#container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.item',
    columnWidth : 240
  });
});
</script>

調用masonry插件的方法格式是：$('#container').masonry( 'methodName', [optionalParameters] )

例如：
.masonry( 'appended', $content, isAnimatedFromBottom )//觸發添加到container的項目的布

局.masonry( 'destroy' )// 徹底移除masonry的功能 返回到元素預初始化狀態
.masonry( 'layout', $items, callback )// 指定項目的佈局
.masonry( 'option', options ) //設置option
.masonry( 'reloadItems' ) //從新聚合全部項目以當前的順序
.masonry( 'reload' ) //用於預先考慮或者插入項目 .masonry( 'reloadItems' )的簡化版
.masonry( 'remove', $items ) //從masonry實例或dom中移除項目

調用infinitescroll插件：
$container.infinitescroll({
        navSelector : '#page-nav', //分頁導航的選擇器
        nextSelector : '#page-nav a', //下頁鏈接的選擇器
        itemSelector : '.box', //你要檢索的全部項目的選擇器
        loading: {
                finishedMsg: 'No more pages to load.',//結束顯示信息
                img: 'http://i.imgur.com/6RMhx.gif'//loading圖片
        }
},
//做爲回調函數觸發masonry
function( newElements ) {
// 當加載時隱藏全部新項目
        var $newElems = $( newElements ).css({ opacity: 0 });
// 在添加到masonry佈局以前保證圖片載入
        $newElems.imagesLoaded(function(){
// 如今能夠顯示全部的元素了
        $newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', $newElems, true );
        });
}
);

　　

Infinite scroll: http://www.infinite-scroll.com/

Infinite scroll Wiki: https://github.com/paulirish/infinite-scroll/wiki/_pages

Masonry: http://masonry.desandro.com/