使用jquery插件waterfall实现自动加载下一页

本文内容主要摘自：<http://wlog.cn/waterfall/index-zh.html>

开发时请参照原文，本文是在做的过程中遇到的一些问题进行补充说明：

Waterfall

下载

下载waterfall插件最新版本。

使用

html：

<div id="container"></div>

这段代码是作为加载内容的容器。

引入jquery，handlebars和waterfall(注：waterfall默认返回json格式数据并使用handlebars模板渲染json数据，你也可以在options中配置使用其它javascript模板如mustache解析json数据或者直接返回html):

原文中加载部分使用的是handlebars插件，不过我不想再多引入插件还是直接使用json或者html

<script src="/path/jquery.min.js"></script>
<!-- <script src="/path/handlebars.js"></script>不引入 -->
<script src="/path/waterfall.min.js"></script>

template:这段也不需要了

<script id="waterfall-tpl" type="text/x-handlebars-template">
    //template content
</script>

我使用的是nodejs的ejs模板，是直接从原有的页面上抠出来一块用来动态加载，使用json的话还要写这么一堆字符串，所以干脆使用html格式的加载，其他语言的大同小异，morenews.html数据：

<%newsList.forEach(function(item,index){%>
<div class="news-list-group-item">
    <img src="<%=download_website+item.picture_mini%>" alt="">
    <div>
        <a href="/portal/news/<%=item.news_id%>" ><strong><%=item.title_zh%></strong></a>
        <p><%=item.summary_zh%></p>
        <p class="news-item-basic"><span class="news-date"><%=item.release_date || item.create_date%></span><span class="news-look">阅读量:<span><%=item.read_count%></span></span></p>
    </div>
</div>
<%})%>

script:

$('#container').waterfall({
	itemCls: 'news-list-group-item', //加载部分的class
	prefix: '',//可以不写
	fitWidth: true, 
	colWidth: 240, 
	gutterWidth: 10,
	gutterHeight: 10,
	align: 'center',//加载部分的对齐样式，可能需要配置
	minCol: 1, 
	maxCol: undefined, 
	maxPage: undefined, 
	bufferPixel: -50, 
	containerStyle: {
		position: 'relative'
	},
	resizable: true, 
	isFadeIn: false,
	isAnimated: false,
	animationOptions: { 
	},
	isAutoPrefill: true,
	checkImagesLoaded: true,
	path: undefined,//加载部分请求地址
	dataType: 'json', //我使用的是html
	params: {}, 
	
	loadingMsg: '<div style="text-align:center;padding:10px 0; color:#999;"><img src="https://img-blog.csdnimg.cn/2022010622421779825.gif" alt="