列表滑到底部自动加载 实现瀑布流

-Infinite Ajax Scroll,a jQuery plugin

随着智能机的普及，一些手机拥有的效果也慢慢的在网页上实现，最近的一个web项目客户就要球实现当页面滑动到底部的时候自动加载下一页的数据，实现无刷新的自动加载。

     因为敝人能力有限也比较懒，所以直接从网上找源码来进行实现，不是很多，但是也有，庆幸的找到以下这个网址：

10 个支持列表无限滚动的 jQuery 插件

http://www.oschina.net/news/29428/10-aggressively-used-jquery-infinite-scroll-plugins

      该文章介绍了10个能够实现该功能的插件，最初的时候我用了介绍的第四个的插件：

       4. Scroll Extend Plugin

      然而该插件只是木然的加载另外一个页面的数据，不能从数据库判断数据已经加载到了哪里，是否已经加载完毕。自己利用session来传递相关的数据，庆幸的是实现了判断数据的加载，在谷歌浏览器下正常，不幸的是不知道为何在ie下只能加载同一条数据，不正常！白死不得其解之后只能含恨放弃了该插件，放弃了之前完成的东西。

      然后我又选择了介绍的第八个插件：

      8. Infinite Ajax Scroll, a jQuery Plugin

       Infinite Ajax Scroll 可将你现有的网页变成支持无限滚动的页面，无需太麻烦就可搞定。仔细研究后发现该插件正是我所需，而且结构很简单，如果你现在的页面已经实现了分页功能的话，那么很容易的就能把它变成支持无限滚动的页面，现有的页面几乎不需要做任何改动，只需要引用相关的js文件，然后配置如下的js：

1: jQuery.ias({

2: container : ".listing",

3: // Enter the selector of the element containing 写入容器的元素<selector>

4: // your items that you want to paginate. 具体数据的元素标识

5:

6: item : ".post",

7: // Enter the selector of the element that each 要加载数据的元素标识

8: // item has. Make sure the elements are inside 用来提取下一页信息里面的元素

9: // the container element. 从而加载到上面的容器中

10:

11: pagination : "#content .navigation",

12: // Enter the selector of the element that contains 分页信息的容器元素标识

13: // your regular pagination links, like next, 即：首页，上一页，下一页，尾页等信息的容器。

14: // previous and the page numbers. This element

15: // will be hidden when IAS loads.

16:

17: next : ".next-posts a",

18: // Enter the selector of the link element that 下一页的元素标识，用来获取下一页的信息元素

19: // links to the next page. The href attribute

20: // of this element will be used to get the items

21: // from the next page.

22:

23: loader : "images/loader.gif"

24: // Enter the url to the loader image. This image 数据进行提取加载的时候显示的图片

25: // will be displayed when the next page with items

26: // is loaded via AJAX.

27: });