Waterfall———瀑布流布局插件, 类似于 Pinterest、花瓣、发现啦。
瀑布流布局插件, 类似于 Pinterest、花瓣、发现啦。
文档
下载
下载waterfall插件最新版本。
使用
html:
<div id="container"></div>
引入jquery,handlebars和waterfall(注:waterfall默认返回json格式数据并使用handlebars模板渲染json数据,你也可以在options中配置使用其它javascript模板如mustache解析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>
script:
$('#container').waterfall({
itemCls: 'waterfall-item',
prefix: 'waterfall',
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',
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
Name | Type | Default value | Description |
---|---|---|---|
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);
Demos
- 无限下拉数据
- 有限下拉数据完成后显示分页
- 瀑布流固定宽度
- 自定义最大列最小列
- resize动画效果
- 加载数据时fadeIn效果
- 左侧或右侧固定列
- 使用其它模板如mustache解析json数据
- ajax加载html格式
- ajax加载jsonp格式
- 没有数据处理
- methods
转自:http://wlog.cn/waterfall/index-zh.html
Waterfall———瀑布流布局插件, 类似于 Pinterest、花瓣、发现啦。的更多相关文章
- myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...
- 网页瀑布流布局插件Masonry
CSS3有实现类似瀑布流布局的属性column,但是遗憾的是这种布局是纵向布局而不支持横向布局.所以比较合适用于文字多列布局. 调用JQuery WaterFall布局插件:http://masonr ...
- jquery瀑布流布局插件,兼容ie6不支持下拉加载,用于制作分类卡
调用方法 $('需要布局的块').sault() 如果要在图片加载后调用需要使用$(window).load(function(fx){});函数,即等待图片加载完成再调用 3个参数 1.left:左 ...
- 瀑布流插件(jquery.masonry.js)
什么是瀑布流?去看看Pinterest(这才是鼻祖),Mark之,蘑菇街,点点网,还有腾讯的微博广场吧.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部. Masonry是一款很好用的jqu ...
- JS 瀑布流布局
瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- 8款实用的Jquery瀑布流插件
1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...
- 瀑布流布局使用详解——JQuery插件Isotope(动态实现子项目筛选)
瀑布流布局,听起来听牛逼的样子,其实就是简单的子元素筛选功能.不过这一功能在网站页面布局当中还是很常用的,特别是在电商网站中 经常会有点一个钮筛选,然后页面的子元素刷的以下变了样.接下来,我们先简单介 ...
- 原生 JS 实现一个瀑布流插件
更好的阅读体验,点击 原文地址 瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探 ...
- jQuery插件之-瀑布流插件
jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...
随机推荐
- 常用数据库的驱动类/URL/默认端口
常用数据库的驱动类/URL/默认端口 1.Oracle: 格式: 驱动:oracle.jdbc.driver.OracleDriver URL:jdbc:oracle:thin ...
- 使用logminer分析日志文件
实验环境 win7 64 oracle PL/SQL Release 11.2.0.1.0 - Productionhttp://blog.csdn.net/tianlesoftware/artic ...
- 开源安全测试 - BackTrack的应用
开源安全测试 - BackTrack的应用: http://gdtesting.com/product.php?id=99
- java.lang.NoClassDefFoundError: com.nostra13.universalimageloader.core.DisplayImageOptions$Builder
今天在使用Universal-image-loader开源插件的时候,一直出现了这么个错误.原因是在ADT22版本中导入jar包的方式不对. 正确的导入jar包方式: 在adt17的版本之后,导入第三 ...
- oracle数据库没有监听服务与实例服务(OracleServicesXX)的解决方法
不知道为什么,可能是因为更新系统的原因,过了一段时间,想打开oracle服务,发现居然没有任何oracle有关的服务了,但以前的数据库文件什么的都在,心想肯定是可以复原的,应该只是注册表的问题罢了.在 ...
- Linux理念
1.小即是美 2.让程序只做好一件事 3.可移植性比效率更重要 4.一切即文件——使用方便而且吧硬件作为文件处理是安全的 5.使用shell脚本来提高效率和可移植性 6.避免使用可定制性低下的用户界面 ...
- 移动端rem布局的适配mixin【转藏】
/*================================================================ 以下为基于ip5 宽度320做的适配,标准html{font-si ...
- webui layout like desktop rich client
similarity similarlike desktop js frameworklike extj js frameworklike rich client js frameworkjs lay ...
- SQL的经典操作——批量复制同行的其它列数据到其它列数据
看图说话比较直观: 对比复制前后的数据表: 使用SQL语句:UPDATE OR ROLLBACK Content SET YINBIAO = YINBIAO2, GESHU = GESHU2 WHER ...
- Hack--兼容性测试
CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效 ...