infinitescroll

最近需要做一个 滚动加载更多的功能，看了下infinitescroll 这个插件可以很容易实现

js:

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="jquery.infinitescroll.min.js"></script>

$(document).ready(function (){              

      $("#postswrapper").infinitescroll({  

            navSelector: "#navigation",     //页面分页元素--成功后自动隐藏  

            nextSelector: "#navigation a",  

            itemSelector: ".item" ,             

            animate: true,  

            maxPage: 4, // 最多加载次数，可在加载后出现分页                                                  

        }); 

});

html:

<div id="wrapper">

<div id="postswrapper">

<p style="font-size:28px">Infinite Scroll Demo 2</p>

<div class="item">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</div>

</div>

<div id="navigation" align="center">         <!-- 页面导航-->  

        <a href="loadmore.php?page=1"></a>        <!-- 此处可以是url，可以是action，要注意不是每种html都可以加，是跟当前网页有相同布局的才可以。另外一个重要的地方是page参数，这个一定要加在这里，它的作用是指出当前页面页码，没加载一次数据，page自动+1,我们可以从服务器用request拿到他然后进行后面的分页处理。-->  

    </div>