本文内容主要摘自:<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="