本文内容主要摘自:<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="data:image/gif;base64,R0lGODlhEAALAPQAAP///zMzM+Li4tra2u7u7jk5OTMzM1hYWJubm4CAgMjIyE9PT29vb6KiooODg8vLy1JSUjc3N3Jycuvr6+Dg4Pb29mBgYOPj4/X19cXFxbOzs9XV1fHx8TMzMzMzMzMzMyH5BAkLAAAAIf4aQ3JlYXRlZCB3aXRoIGFqYXhsb2FkLmluZm8AIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7" alt=""><br />Loading...</div>',
state: {
isDuringAjax: false,
isProcessingData: false,
isResizing: false,
curPage: 1
},
// callbacks
callbacks: {
/*
* loadingStart
* @param {Object} loading $('#waterfall-loading')
*/
loadingStart: function($loading) {
$loading.show();
//console.log('loading', 'start');
},
/*
* loadingFinished
* @param {Object} loading $('#waterfall-loading')
* @param {Boolean} isBeyondMaxPage
*/
loadingFinished: function($loading, isBeyondMaxPage) {
if ( !isBeyondMaxPage ) {
$loading.fadeOut();
//console.log('loading finished');
} else {
//console.log('loading isBeyondMaxPage');
$loading.remove();
}
},
/*
* loadingError
* @param {String} xhr , "end" "error"
*/
loadingError: function($message, xhr) {
$message.html('Data load faild, please try again later.');
},
/*
* renderData
* @param {String} data
* @param {String} dataType , "json", "jsonp", "html"
*/
renderData: function (data, dataType) {
var tpl,
template;
if ( dataType === 'json' || dataType === 'jsonp' ) { // json or jsonp format
tpl = $('#waterfall-tpl').html();
template = Handlebars.compile(tpl);
return template(data);
} else { // html format
return data;
}
}
},
debug: false
});
options
itemCls | String | 'waterfall-item' | 瀑布流数据块class |
prefix | String | 'waterfall' | 瀑布流元素前辍 |
fitWidth | Boolean | true | 是否自适应父元素宽度 |
colWidth | Integer | 240 | 瀑布流每列的宽度 |
gutterWidth | Integer | 10 | 数据块水平间距 |
gutterHeight | Integer | 10 | 数据块垂直间距 |
align | String | 'center' | 数据块相对于容器对齐方式,'align', 'left', 'right' |
minCol | Integer | 1 | 数据块最小列数 |
maxCol | Integer | undefined | 数据块最多显示列数,默认undefined,最大列数无限制 |
maxPage | Integer | undefined | 最多显示多少页数据,默认undefined,无限下拉 |
bufferPixel | Integer | -50 | 滚动时, 窗口底部到瀑布流最小高度列的距离 > bufferPixel时, 自动加载新数据 |
containerStyle | Object | {position: 'relative'} | 瀑布流默认样式 |
resizable | Boolean | true | 缩放时是否触发数据重排 |
isFadeIn | Boolean | false | 新插入数据是否使用fade动画 |
isAnimated | Boolean | false | resize时数据是否显示动画 |
animationOptions | Object | {} | resize动画效果,isAnimated为true时有效 |
isAutoPrefill | Boolean | true | 当文档小于窗口可见区域,自动加载数据 |
checkImagesLoaded | Boolean | true | 是否图片加载完成后开始排列数据块。如果直接后台输出图片尺寸,可设置为false,强烈建议从后台输出图片尺寸,设置为false |
path | Array, Function | undefined | 瀑布流数据分页url,可以是数组如["/popular/page/", "/"] => "/popular/page/1/",或者是根据分页返回一个url方法如:function(page) { return '/populr/page/' + page; } => "/popular/page/1/" |
dataType | String | 'json' | 瀑布流返回数据格式,'json', 'jsonp', 'html' |
params | Object | {} | 瀑布流数据请求参数,{type: "popular", tags: "travel", format: "json"} => "type=popular&tags=travel&format=json" |
loadingMsg | Html | 见下面代码 | 加载提示进度条,html |
callbacks | Object | 见下面代码 | callback |
debug | Boolean | false | 开启debug |
loadingMsg:
'<div style="text-align:center;padding:10px 0; color:#999;"><img src="data:image/gif;base64,R0lGODlhEAALAPQAAP///zMzM+Li4tra2u7u7jk5OTMzM1hYWJubm4CAgMjIyE9PT29vb6KiooODg8vLy1JSUjc3N3Jycuvr6+Dg4Pb29mBgYOPj4/X19cXFxbOzs9XV1fHx8TMzMzMzMzMzMyH5BAkLAAAAIf4aQ3JlYXRlZCB3aXRoIGFqYXhsb2FkLmluZm8AIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7" alt=""><br />Loading...</div>'
callbacks:
callbacks: {
/*
* ajax请求开始之前
* @param {Object} loading $('#waterfall-loading')
*/
loadingStart: function($loading) {
$loading.show();
},
/*
* ajax请求加载完成
* @param {Object} loading $('#waterfall-loading')
* @param {Boolean} isBeyondMaxPage
*/
loadingFinished: function($loading, isBeyondMaxPage) {
if ( !isBeyondMaxPage ) {
$loading.fadeOut();
} else {
$loading.remove();
}
},
/*
* ajax请求出错误
* @param {String} xhr , "end" "error"
*/
loadingError: function($message, xhr) {
$message.html('Data load faild, please try again later.');
},
/*
* 处理ajax返回数方法
* @param {String} data
* @param {String} dataType , "json", "jsonp", "html"
*/
renderData: function (data, dataType) {
var tpl,
template;
if ( dataType === 'json' || dataType === 'jsonp' ) { // json或jsonp格式
tpl = $('#waterfall-tpl').html();
template = Handlebars.compile(tpl);
return template(data);
} else { // html格式
return data;
}
}
}
method
$('#container').waterfall( 'methodName', [optionalParameters] );
prepend
$('#container').waterfall('prepend', $content, callback);
append
$('#container').waterfall('append', $content, callback);
removeItems
$('#container').waterfall('removeItems', $items, callback);
reLayout
$('#container').waterfall('reLayout', $content, callback);
pause
$('#container').waterfall('pause', callback);
resume
$('#container').waterfall('pause', callback);
option
$('#container').waterfall('option', options, callback);
以上几个方法根据需求使用,比如没有数据的时候,可以查看下面的“没有数据处理”的源码,还有种情况是页面初始化就没有数据,这样会一直有加载的效果,可以加上这样一段代码:
var c = $("#container").html().replace(/\ +/g,"").replace(/[\r\n]/g,""); if(c==""){ $("#container").append('<p style="color:#FFF; text-align: center">没有数据,请查看其他内容!<a href="javascript:window.history.back()">返回</a></p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>'); }else { $('#container').waterfall({ itemCls: 'news-list-group-item',
相关推荐
jquery瀑布流插件
waterfall-jQuery实现的瀑布流效果,当前流行的一种布局风格,向下滚动即时加载内容,下拉滚动条或鼠标滚轮滚动到页面底部时, 动态即时加载新内容。主要是当滚动到居底部以上100像素时,就开始加载新内容了。
waterfall无限动态加载图片支持手机移动端的瀑布流插件
NULL 博文链接:https://onestopweb.iteye.com/blog/2322860
Jquery瀑布流插件
插件描述:jq-waterfall是一款仿Pinterest网站的响应式无限动态加载图片瀑布流特效jQuery插件。演示地址:http://www.jq22.com/jquery-info9336
一款简单的jquery瀑布流特效,完美实现了图片的ajax无限加载效果,相关参数设置说明: column_width:240,//列宽 column_className:'waterfall_column',//列的类名 column_space:10,//列间距 cell_...
JQuery bottom filling waterfall flow is an automatic bottom filling alignment waterfall flow layout code.
html+js瀑布流特效,效果不错,方便整合到各种开发语言中,包括php,.net,java等,资源来源于国外网站
瀑布流插件实现 注:需要jquery支持。ie8+,chrome,FF等主流浏览器皆可 ###使用方法: 提取waterfall/public/javascripts/waterfall.js作为插件。 waterfall/views/index.ejs为插件演示的html文件。 插件调用方式:...
用户自定义aJax模块(未实现,若要使用需要自行在代码中修改ajax模块中的url等参数以及success函数。); HTML格式: <div id="s_waterFall"> <div class="waterDiv"></div> <div class="waterDiv"></div> ...
JQuery Customizable Height Picture Waterfall Stream Code is a jQuery Waterfall Stream special effect that supports customizing height and adding pictures directly with URL address.
jquery 实现图片瀑布流加载,附件中含有全部源代码,waterfall.js为对应的js代码。images中存放图片信息,demo中图片加载为静态加载,后续可以改成ajax服务请求更新。
JQuery random image waterfall flow infinite loading is a simple jQuery random image waterfall flow infinite loading case demo download
vue瀑布流组件(vue-waterfall-easy 2.x) 这是一个vue组件,包含瀑布流布局和无限滚动加载 与其他实现相比,无需在返回的数据中指定图像的宽度和高度 正是因为有了第二项,图像才被预加载,然后进行布局 响应式...
Vue瀑布2 自动适应宽度和高度 高度定制 支持延迟加载(带有lazy-src属性) 适用于PC /手机 如果您有任何疑问,欢迎描述问题,建议;...对于需要延迟加载的图像,需要使用'lazy-src'属性 < waterfal
JQuery waterfall flow arrangement style code is a jQuery waterfall flow code based on gridify. JS plug-in
waterfall自适应图片瀑布流布局无限加载代码,兼容电脑、平板和手机端浏览,使用front封装渲染,cell的宽高间隙定义全局参数自行修改。
waterFall - 瀑布流插件
React waterfall 高性能无限滚动下拉加载