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/
