// 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的更多相关文章

  1. Infinite Scroll - jQuery & WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

  2. Infinite Scroll–无限分页

    一.前言 现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个“点击加载 ...

  3. Infinite scroll has been called autopagerize, unpaginate, endless pages

    http://www.infinite-scroll.com/ Infinite scroll has been called autopagerize, unpaginate, endless pa ...

  4. 网页浏览 infinite scroll效果知识

    infinite scroll 类似一些网站, 例如京东搜索商品, 浏览到最后一页,自动加载新的商品. 一则可以加快首页响应速度, 二则减轻带宽和服务器荷载. 这么多商品信息一次性返回给客户端也是不可 ...

  5. mint ui解决Navbar和Infinite scroll共存时的bug

    Navbar和Infinite scroll共同使用时会出现无限加载的问题,滑动也会出现乱加载. 只需要判断一下就可以了,代码: html: <mt-navbar v-model="s ...

  6. infinite scroll blogs

    infinite scroll blogs 无限滚动 blogs beacon api https://www.sitepoint.com/introduction-beacon-api/ Histo ...

  7. infinite auto load more & infinite scroll & load more

    infinite auto load more & infinite scroll & load more https://codepen.io/xgqfrms/pen/NZVvGM ...

  8. javascript disable scroll event

    javascript disable scroll event Document: scroll event https://developer.mozilla.org/en-US/docs/Web/ ...

  9. 无穷滚动(Infinite scroll)的实现原理

    1 无穷滚动(无限加载)与分页的比较 现在越来越多的网站或者博客的列表页开始抛弃传统的分页技术,大致的原因在于,分页明显地增加了用户的操作行为以及页面加载等待的时间,而网页浏览者往往没什么耐心. 而无 ...

随机推荐

  1. [ofbiz]less-than (&lt;) and greater-than (&gt;) symbols

    问题描述: In field [updateItemStr] less-than (<) and greater-than (>) symbols are not allowed 此处的f ...

  2. 几个makefile小例子

    http://www.blogjava.net/canvas/articles/quick_makefile.html http://www.cnblogs.com/azraelly/archive/ ...

  3. [Head First Python]3. 文件与异常:处理错误

    datafile.txt Man: Is this the right room for an argument? Other Man: I've told you once. Man: No you ...

  4. PHP ReflectionClass

    <?php /** * @desc test reflectionclass * @author songweiqing * @create_time 2015-01-7 * */ class ...

  5. Python变量和数据类型

    十六进制用0x前缀和0-9 a-f表示   字符串是以''或""括起来的任意文本   一个布尔值只有True和False两种值   布尔值可以用and or not运算   空值是 ...

  6. 树上战争(HDU 2545 并查集求解点到根节点长度)

    树上战争 Time Limit: 10000/4000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  7. 1007 Numerical Summation of a Series

    简单入门题.按照题目给的指导编程,算多少数要理解题意. #include <stdio.h> int main(){ int k,ssx; double x,psix; ;ssx<= ...

  8. Js验证 :只能输入数字和小数点 验证是否是数字 js取float型小数点后两位

    JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'') ...

  9. jQuery之位置

    1.offset()获取匹配元素在相对浏览器窗口的偏移量 返回一个对象,包括两个属性.left:相对浏览器窗口左边的距离.top:相对浏览器顶部的距离.  $("#div1").o ...

  10. 【CF 676B Pyramid of Glasses】模拟,递归

    题目链接:http://codeforces.com/problemset/problem/676/B 题意:一个n层的平面酒杯金字塔,如图,每个杯子的容量相同.现在往最顶部的一个杯子倒 t 杯酒,求 ...