页面底端自动加载无需翻页功能 类似 新浪微博和Pinterest
在新浪微博中，当阅读到页面最底端的时候，会自动显示一个“加载中”的功能，并自动从服务器端无刷新的将内容下载到本地浏览器显示。
这样的自动加载功能是如何实现的？
这样的自动加载功能是如何实现的？
jQuery的插件 ScrollPagination 可以帮助实现这个功能。
这里是ScrollPagination 功能的原型化代码，
1 $(function(){
2 $('#content').scrollPagination({
3 'contentPage': 'democontent.html', // the page where you are searching for results
4 'contentData': {}, // you can pass the children().size() to know where is the pagination
5 // who gonna scroll? in this example, the full window
6 'scrollTarget': $(window),
7 // how many pixels before reaching end of the page would loading start?
8 'heightOffset': 10,positives numbers only please
9 'beforeLoad': function(){ // before load, some function, maybe display a preloader div
10 $('.loading').fadeIn();
11 },
12 // after loading, some function to animate results and hide a preloader div
13 'afterLoad': function(elementsLoaded){
14 $('.loading').fadeOut();
15 var i = 0;
16 $(elementsLoaded).fadeInWithDelay();
17 // if more than 100 results loaded stop pagination (only for test)
18 if ($('#content').children().size() > 100){
19 $('#content').stopScrollPagination();
20 }
21 }
22 });
23
24 // code for fade in element by element with delay
25 $.fn.fadeInWithDelay = function(){
26 var delay = 0;
27 return this.each(function(){
28 $(this).delay(delay).animate({opacity:1}, 200);
29 delay += 100;
30 });
31 };
32
2 $('#content').scrollPagination({
3 'contentPage': 'democontent.html', // the page where you are searching for results
4 'contentData': {}, // you can pass the children().size() to know where is the pagination
5 // who gonna scroll? in this example, the full window
6 'scrollTarget': $(window),
7 // how many pixels before reaching end of the page would loading start?
8 'heightOffset': 10,positives numbers only please
9 'beforeLoad': function(){ // before load, some function, maybe display a preloader div
10 $('.loading').fadeIn();
11 },
12 // after loading, some function to animate results and hide a preloader div
13 'afterLoad': function(elementsLoaded){
14 $('.loading').fadeOut();
15 var i = 0;
16 $(elementsLoaded).fadeInWithDelay();
17 // if more than 100 results loaded stop pagination (only for test)
18 if ($('#content').children().size() > 100){
19 $('#content').stopScrollPagination();
20 }
21 }
22 });
23
24 // code for fade in element by element with delay
25 $.fn.fadeInWithDelay = function(){
26 var delay = 0;
27 return this.each(function(){
28 $(this).delay(delay).animate({opacity:1}, 200);
29 delay += 100;
30 });
31 };
32
33 });
这里可以看到jQuery Scroll Pagination的实现效果，
http://andersonferminiano.com/jqueryscrollpagination/
只要将界面不断往下滚动就可以看到。
http://andersonferminiano.com/jqueryscrollpagination/
只要将界面不断往下滚动就可以看到。
插件下载地址为，http://andersonferminiano.com/jqueryscrollpagination/jqueryscrollpagination.zip
Pinterest易用性更好。Pinterest目前采用邀请制，可以赴首页申请邀请码。Pinterest目前没有iOS应用，而且不支持中文。Google的扩展库里有pinterest插件，猛击安装。
其出现之后，国内如雨后春笋般出现了一堆模仿者。纵观这些模仿者，多数都是用jQuery的插件jQuery Masonry来实现。看来这确实是个比较实用的插件。不过，是否能够学到Pinterest的精髓，那就见仁见智了。
以下是一些类Pinterest网站：
拼范：http://www.pinfun.com/
搜道-秀：http://show.sodao.com/
Mark之：http://markzhi.com/
花瓣：http://huaban.com/
迷尚：http://www.mishang.com/
码图网：http://www.markpic.com/
堆糖：http://www.duitang.com/
Idsoo：http://idsoo.com/
布兜：http://www.budoou.com/
Topit.me：http://www.topit.me/
weheartit：http://weheartit.com/
另外，一些购物类推荐网站身上，也多有Pinterest的影子，比如凡客达人、美丽说、蘑菇街（book）、淘宝哇哦、新鲜网等。
