JavaScript Infinite scroll & Masonry
// infinitescroll() is called on the element that surrounds
// the items you will be loading more of
$('#content').infinitescroll({ navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a:first",
// selector for the NEXT link (to page 2)
itemSelector : "#content div.post"
// selector for all items you'll retrieve
});
// usage:
// $(elem).infinitescroll(options,[callback]); // infinitescroll() is called on the element that surrounds
// the items you will be loading more of
$('#content').infinitescroll({ navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden) nextSelector : "div.navigation a:first",
// selector for the NEXT link (to page 2) itemSelector : "#content div.post",
// selector for all items you'll retrieve debug : true,
// enable debug messaging ( to console.log ) loadingImg : "/img/loading.gif",
// loading image.
// default: "http://www.infinite-scroll.com/loading.gif" loadingText : "Loading new posts...",
// text accompanying loading image
// default: "<em>Loading the next set of posts...</em>" animate : true,
// boolean, if the page will do an animated scroll when new content loads
// default: false extraScrollPx: 50,
// number of additonal pixels that the page will scroll
// (in addition to the height of the loading div)
// animate must be true for this to matter
// default: 150 donetext : "I think we've hit the end, Jim" ,
// text displayed when all items have been retrieved
// default: "<em>Congratulations, you've reached the end of the internet.</em>" bufferPx : 40,
// increase this number if you want infscroll to fire quicker
// (a high number means a user will not see the loading message)
// new in 1.2
// default: 40 errorCallback: function(){},
// called when a requested page 404's or when there is no more content
// new in 1.2 localMode : true
// enable an overflow:auto box to have the same functionality
// demo: http://paulirish.com/demo/infscr
// instead of watching the entire window scrolling the element this plugin
// was called on will be watched
// new in 1.2
// default: false },function(arrayOfNewElems){ // optional callback when new content is successfully loaded in. // keyword `this` will refer to the new DOM content that was just added.
// as of 1.5, `this` matches the element you called the plugin on (e.g. #content)
// all the new elements that were found are passed in as an array });
// load all post divs from page 2 into an off-DOM div
$('
').load('/page/2/ #content div.post',function(){
$(this).appendTo('#content'); // once they're loaded, append them to our content area
});
Infinite scroll 中文注释
$('#waterfall').infinitescroll({
navSelector: "#navigation", //导航的选择器,会被隐藏
nextSelector: "#navigation a", //包含下一页链接的选择器
itemSelector: ".wfc", //你将要取回的选项(内容块)
debug: true, //启用调试信息
animate: true, //当有新数据加载进来的时候,页面是否有动画效果,默认没有
extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载,默认150
bufferPx: 40, //载入信息的显示时间,时间越大,载入信息显示时间越短
errorCallback: function() {
alert('error');
}, //当出错的时候,比如404页面的时候执行的函数
localMode: true, //是否允许载入具有相同函数的页面,默认为false
dataType: 'html',//可以是json
// template: function(data) {
// //data表示服务端返回的json格式数据,这里需要把data转换成瀑布流块的html格式,然后返回给回到函数
// return '';
// },
loading: {
msgText: "加载中...",
finishedMsg: '没有新数据了...',
selector: '.loading' // 显示loading信息的div
}
}, function(newElems) {
//程序执行完的回调函数
var $newElems = $(newElems);
$('.wrapper:eq(1)').masonry('appended', $newElems);
});
Masonry 中文注释
$(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,//使用从右到左的布局
});
});
Masonry & Infinite scroll 联合使用
$(function(){
var $container = $('#content ul'); //设置容器
$('#content ul').infinitescroll({
navSelector : "div.page .pages", //导航的选择器
nextSelector : "div.page .pages a.nextpage", //包含下一页链接的选择器
itemSelector : "#content ul li" //你将要取回的选项(内容块)
}, function( newElements ) {
//程序执行完的回调函数
var $newElems = $( newElements );
$container.masonry( 'appended', $newElems );
});
$('#content').masonry({
itemSelector : '#content li', //子类元素
columnWidth : 251 //一列的宽度
});
});
当需要排列图片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/
JavaScript Infinite scroll & Masonry的更多相关文章
- Infinite Scroll - jQuery & WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
- Infinite Scroll–无限分页
一.前言 现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个“点击加载 ...
- Infinite scroll has been called autopagerize, unpaginate, endless pages
http://www.infinite-scroll.com/ Infinite scroll has been called autopagerize, unpaginate, endless pa ...
- 网页浏览 infinite scroll效果知识
infinite scroll 类似一些网站, 例如京东搜索商品, 浏览到最后一页,自动加载新的商品. 一则可以加快首页响应速度, 二则减轻带宽和服务器荷载. 这么多商品信息一次性返回给客户端也是不可 ...
- mint ui解决Navbar和Infinite scroll共存时的bug
Navbar和Infinite scroll共同使用时会出现无限加载的问题,滑动也会出现乱加载. 只需要判断一下就可以了,代码: html: <mt-navbar v-model="s ...
- infinite scroll blogs
infinite scroll blogs 无限滚动 blogs beacon api https://www.sitepoint.com/introduction-beacon-api/ Histo ...
- infinite auto load more & infinite scroll & load more
infinite auto load more & infinite scroll & load more https://codepen.io/xgqfrms/pen/NZVvGM ...
- javascript disable scroll event
javascript disable scroll event Document: scroll event https://developer.mozilla.org/en-US/docs/Web/ ...
- 无穷滚动(Infinite scroll)的实现原理
1 无穷滚动(无限加载)与分页的比较 现在越来越多的网站或者博客的列表页开始抛弃传统的分页技术,大致的原因在于,分页明显地增加了用户的操作行为以及页面加载等待的时间,而网页浏览者往往没什么耐心. 而无 ...
随机推荐
- oracle中anyData数据类型的使用实例
---创建waterfallcreate or replace type waterfall is object(name varchar2(30),height number); --创建river ...
- html 学习笔记--基础篇
最近被部门经理要求看一下html,重新看发现好多以前看过的只是都忘记了或者以前走马观花看过没有记得住的东西,正好趁此机会在博客上记录一下,顺便的如果以后需要查找,这里有记录的话可能会比上网查快一点(也 ...
- Java反射机制简单使用
1.Java反射相关类所在package: java.lang.reflect.* 2.开始使用Reflection: 使用reflect相关类,遵循三个步骤: a.获取想要操作类的 java.lan ...
- sql server中主键列的插入问题
仅当使用了列列表并且 IDENTITY_INSERT 为 ON 时,才能为表'dbo.t_test'中的标识列指定显式值. SET IDENTITY_INSERT dbo.t_test ON ,'c' ...
- 深入 char * ,char ** ,char a[ ] ,char *a[] 内核
本文来自CSDN博客:daiyutage的文章 来源网页地址:http://blog.csdn.net/daiyutage/article/details/8604720 本人觉得这是一编很有价值的文 ...
- opencv中的图像区域复制
openCV作为已经成熟的开源库,很多操作它都已经有了高效,使用方便的方法.我的应用场景是这样的,从一张大图片中抠出一小部分,然后处理这一小部分后再放到大图像中.对于抠出来可以这样实现: Rect r ...
- MySQL--mysqldump的权限说明
mysqldump 所需要的权限说明: 1.对于table 来说mysqldump 最少要有select 权限. 2.对于view 来说mysqldump 要有show view 权限. 3.对于tr ...
- 2014第2周三Web安全学习
2014第2周三Web安全学习 先记录下自己关于json和xml作为数据传递媒介的差异:在写一个java方法时我将正确结果返回的对象转成json返回,将错误结果根据不同原因以xml形式返回,同事看后有 ...
- 51操作各种demo 驱动
24C02 bit write=0; //写24C02的标志: sbit sda=P2^0; sbit scl=P2^1; void delay0() { ;; } void start() //开始 ...
- java编译相关问题总结
参考:http://jingyan.baidu.com/article/5bbb5a1b080f6113eba179f0.html 1.在linux下生成的class文件/jar包,拿到windows ...