jQuery Infinite Scroll给个例子
时间: 2023-06-12 07:02:41 浏览: 52
好的,下面是一个使用jQuery Infinite Scroll插件的例子:
HTML部分:
```html
<div id="content">
<div class="post">第1篇文章</div>
<div class="post">第2篇文章</div>
<div class="post">第3篇文章</div>
<!-- ... -->
</div>
<div id="loading">
<img src="loading.gif" alt="加载中...">
</div>
```
CSS部分:
```css
#loading {
text-align: center;
padding: 20px;
}
```
JavaScript部分:
```javascript
$(document).ready(function() {
$('#content').infinitescroll({
navSelector: '#page-nav',
nextSelector: '#page-nav a',
itemSelector: '.post',
loading: {
finishedMsg: '没有更多内容了',
img: 'loading.gif'
}
});
});
```
以上代码中,我们使用了`infinitescroll`函数来初始化Infinite Scroll插件。`navSelector`选项用于指定包含"下一页"链接的DOM元素,`nextSelector`选项用于指定"下一页"链接的选择器,`itemSelector`选项用于指定需要无限滚动的DOM元素,`loading`选项用于定义加载提示信息。
当用户滚动到页面底部时,插件会自动加载下一页内容并添加到DOM中,直到加载完所有内容或者达到指定的最大加载次数。