现在类似于pinterest这类的表现效果很火，其实我比较中意的是他的布局效果，而不是那种瀑布流。

    虽然我不是特别喜欢这种瀑布流的表现样式，但是还是写了几篇关于无限滚动瀑布流效果的文章，Infinite scroll+Masonry=无限滚动瀑布流，infinite-scroll-jquery滚动条(下拉)加载数据插件之类的文章。可能是我表达描述不是很详细清楚，所以好多朋友看了不是很清楚，并发信给我求解释。所以有了今天这篇文章。

    其实早在：十几款jquery无限滚动插件这篇文章中我就提到过这种效果的实现原理。主要是判断滚动条滚动的位置距离底部的距离，如果小于或者等于设置的高度的话，那么就执行ajax加载异步数据到固定的盒子中。我想大家对于这点是比较清楚的，恐怕对于怎样获取数据有点不甚了了的感觉。OK，下面看痞子的步步解析!

无限滚动第一步，ajax异步加载的条件：

    我们都知道，对于一些列表页面的布局结构都是一样的，数据部分是由程序生成的。并且每个页面都有下一页的链接地址。OK完毕，这点这是基本条件(注意红色部分)。

    为了给大家做直观的对比，我这里拿出3个页面进行对比分析，其中采用的masonry的效果，关于这个插件我这里不多说，可以看Masonry-jquery插件打造的瀑布流样式效果来对该效果有个简单的认识。这三个页面的结构是一样的，内容是不一样的(我们用不同的图片来区分)。

    这三个页面左边都有下一页的链接，链接层次分别是

    default.html -> default1.html ->default2.html -> 无

    下面是三个页面地址：

    http://www.niumowang.org/demo/infinite/default.html

     http://www.niumowang.org/demo/infinite/default1.html

     http://www.niumowang.org/demo/infinite/default2.html

    我们点击每个页面的下一页会看到，页面会打开一个新的页面结构与之前的页面相同，内容不同。最后一个页面default2.html的下一页链接处是空连接，代表后面没有页面了。

无限滚动第二步，ajax异步加载如何进行：

    第一步的工作完成后，我们要在上面的下一页链接处做文章。在第一步提供的链接中，我们点击下一页都会打开下一页的链接，并显示内容。但是我们现在要做的就是用ajax异步加载数据到当前页面，实现点击链接不打开新的页面，但是加载这个链接中的数据到本页面。这里当然就用到了ajax了，所幸jquery封装的ajax比较简单，我们很容易实现将其他页面的内容加载到当前页面中。

    还是三个结构相同，内容不同的页面：(点击下一页可以看到效果)

    http://www.niumowang.org/demo/infinite/ajax.html

     http://www.niumowang.org/demo/infinite/ajax1.html

     http://www.niumowang.org/demo/infinite/ajax2.html

    我们来看具体实现代码部分：

$(".next_page a").click(function() {
  //首先取得下一页的链接地址
  var href = $(this).attr("href");
  //判断该链接是否被加载过
  startHref = href;
  //判断下一页的链接地址是否存在
  if (href != undefined) {
    //如果存在的话，用ajax获取数据
    $.ajax({
      type: "get",
      url: href,
      success: function(data) {
        //将返回的数据进行处理，挑选出class是post的内容块
        var $res = $(data).find(".post");

        //结合masonry插件，将内容append进ID是content的内容块中
        $("#content").append($res).masonry(\'appended\', $res);

        //newHref获取返回的内容中的下一页的链接地址
        var newHref = $(data).find(".next_page a").attr("href");

        //判断下一页地址是否存在，如果存在，替换当前页的链接地址。不存在，将当前页链接地址属性href移除，并替换内容为“下一页没有了”
        if (newHref != undefined) {
          $(".next_page a").attr("href", newHref);
        } else {
          $(".next_page a").html("下一页没有了").removeAttr("href")
        }
      }
    })
  }

  //返回false，使得点击进入新页面失效
  return false;
})

    用文字表达一下这个过程就是：点击链接，异步加载这个链接中的数据后，挑选出符合条件的内容，然后将内容用js加载到这个页面固定的容器中，并且将这个链接的地址替换成新的链接地址。并对如果没有下一页的情况进行处理。

    其中找到下一页的链接地址可能情况比较多变一些，比如存在“123456...”这样的链接结构；当然这种情况的话，我们可以采用获取比如class为current的链接地址，那么下一页的地址就是current后面的一个链接，然后用返回数据将包含所有分页地址的容器替换掉。所谓具体问题具体分析，这里点到即止。

    另外就是masonry将ajax返回的数据进行重新布局的操作了，这个属于masonry的范畴，不做过多解释。关于masonry自己从本站找相关资料。

无限滚动第三步，滚动条控制无限加载：

    所谓滚动条控制无限滚动，只不过把点击的效果替换掉。我们通过滚动鼠标滚轮，或者拖动滚动条到底部来实现原来的点击异步加载数据的情况。

    如果你要实现的话，该怎么做呢？

    是的，我们只需要判断滚动条距离底部的位置就行了。如果到了底部，我们就加载一次数据。

     但是还有一个问题，由于我们需要实时获取滚动条的最新位置，而获取滚动条位置不是自动的，我们总不能点击一个按钮获取一次数据吧，或者用setTimeout，每隔一段时间获取一次数据。当然这些都是不可行的。

     比较可行的方法就是：我们给(window)窗口绑定一个scroll事件，所谓绑定事件就是监听这个对象，监视它的一举一动。如果window窗口滚动的时候，滚动条到底了，那么我们可以进行我们的小动作异步加载数据进来了。OK，看代码实现。

//首先给窗口绑定事件scroll
$(window).bind("scroll",function() {
    // 然后判断窗口的滚动条是否接近页面底部，这里的20可以自定义
    if ($(document).scrollTop() + $(window).height() > $(document).height() - 20) {
          //我这里偷个懒，没有写ajax的调用，直接触发了链接的click事件。
          if($(".next_page a").attr(\'href\') != startHref){
                 //这里判断当前要加载的链接是否已经加载过
                 $(".next_page a").trigger("click");
          }
    }
})

    演示地址：http://www.niumowang.org/demo/infinite/auto_ajax.html

    上面代码部分，我没有写ajax的具体调用过程，而是在原基础上触发了链接的点击事件。如果想要看滚动实现的ajax效果的，打开地址：http://www.niumowang.org/demo/infinite/auto_ajax1.html自行查看代码部分。

    上面有个数字是20，就是滚动条距离底部还是20像素的时候开始加载。这里是为了实现预先加载效果，不至于当用户滚动到底部的时候，数据还没有加载出来，如果你感觉你的内容较大的话，还可以增加这个值。

无限滚动效果实现原理，总结：

    至此一个滚动条实现无限滚动的效果就说完了。做一个最后的总结工作。

    可以说目前网上实现无限滚动的效果各有千秋，基于的框架也不尽相同。我写这篇文章的目的是让大家领会一种思路，能明白这种效果是怎么做出来的。

    我这种方法的文字原理部分：滚动条滚动后，如果到达底部，或者距离底部一段距离的时候，找到下一页的链接地址，获取这个地址中的数据。然后将返回的数据，采用重新布局添加到固定的容器中。OK，就这么简单。

    无限滚动的高级进阶部分：

    话说高级进阶也没有多么高级，只不过可能加载数据不是采用这种get或者post，哪怕load页面的方式，而是通过传参，从数据库读取数据。亦或是增加一些返回数据的特效，比如返回数据后，重新布局的时候增加点动画，或者滚动条增加点平滑滚动效果。不过尔尔，记住一句话：只要去实践，一切技术派都是纸老虎。

2012.08.30 BUG调整

    下面好几个朋友提到了多次加载的问题，由于当初设计的时候没有考虑到加载内容后滚动条变化的问题。所以出现了这个情况。近日有时间解决一下。顺便感谢下面提出问题的几位朋友。

     修改方法，主要是定义一个全局变量 var startHref ;

     然后next_page触发一次之后，修改此startHref的值，在滚动的时候拿到当前的next_page中链接的值，与startHref进行对比，如果不同的话再执行加载过程。

     效果查看：http://www.niumowang.org/demo/infinite/auto_ajax.html

建议继续学习：

1. JQuery实现Excel表格呈现    (阅读：46522)
2. 分享一个JQUERY颜色选择插件    (阅读：12650)
3. jQuery插件---轻量级的弹出窗口wBox.    (阅读：9688)
4. 10个强大的Ajax jQuery文件上传程序    (阅读：7757)
5. jQuery的data()方法    (阅读：7585)
6. jQuery性能优化指南    (阅读：7325)
7. jQuery Color Animations颜色动画插件    (阅读：7088)
8. 精于图片处理的10款jQuery插件    (阅读：6221)
9. 瀑布流布局浅析    (阅读：5979)
10. jQuery中getJSON跨域原理详解    (阅读：5620)