Masonry+Infinite-scroll实现瀑布流布局及无限滚动加载

实现瀑布流布局以及无限滚动加载，我们将采用两个JQuery插件来实现。

 

1. Mansory插件实现瀑布流布局 

         Masonry官方网站：http://masonry.desandro.com/        

         实现瀑布流布局的格式要求：         

<div id=”container”>

    <div class=”box”>…</div>

    <div class=”box”>…</div>

    <div class=”box”>…</div>

    ...

 </div>

                   其中 box的样式要求是 float: left        

         配置：                   

<script type="text/javascript">

       $(function(){

           $('#container').masonry({

               itemSelector: '.box',

               isFitWidth: true

           });

      });

</script>

          说明：container是瀑布流布局的外层容器

                     itemSelector是需要实现瀑布流布局的“块”

                     isFitWidth 设置为true可以实现居中显示

                     目前项目中设置这两个选项即可，Masonry还可以设置动画等效果。

2. Infinite-scroll插件实现无限滚动加载 

Infinite-scroll官方网站：http://www.infinite-scroll.com/ 

Infinite-scroll的原理：在垂直滚动条滚动时请求“下一页”，并把下一页中符合要求的“块”加载到当前页面的容器中，然后调用Mansory的Appended方法把新加入的块用瀑布流布局。 

步骤：

         1. 添加如下标签：

                   <nav id="page-nav">

                      <a href="2.html"></a>

                   </nav>

         2. 配置插件                   

<script type="text/javascript">

        $(function () {

 

            $('#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'

                }

            },

                function (newElements) { //回调函数，用Masonry布局

                    var $newElems = $(newElements);

                             $('#container').masonry('appended', $newElems);

                }

            );

        });                               

</script>

         3.构建”下一页”。

关于下一页的说明：下一页不一定非要是2.html的格式，a.html?id=2之类的页面都可以，但一定是要从2开始，之后的每次请求回自动变成3.html, 4.html或者a.html?id=3, a.html?id=4.