瀑布流布局插件, 类似于 Pinterest花瓣发现啦

En 中文

文档

下载

下载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:

'&lt;div style="text-align:center;padding:10px 0; color:#999;">&lt;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="">&lt;br />Loading...&lt;/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

转自:http://wlog.cn/waterfall/index-zh.html

Waterfall———瀑布流布局插件, 类似于 Pinterest、花瓣、发现啦。的更多相关文章

  1. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

  2. 网页瀑布流布局插件Masonry

    CSS3有实现类似瀑布流布局的属性column,但是遗憾的是这种布局是纵向布局而不支持横向布局.所以比较合适用于文字多列布局. 调用JQuery WaterFall布局插件:http://masonr ...

  3. jquery瀑布流布局插件,兼容ie6不支持下拉加载,用于制作分类卡

    调用方法 $('需要布局的块').sault() 如果要在图片加载后调用需要使用$(window).load(function(fx){});函数,即等待图片加载完成再调用 3个参数 1.left:左 ...

  4. 瀑布流插件(jquery.masonry.js)

    什么是瀑布流?去看看Pinterest(这才是鼻祖),Mark之,蘑菇街,点点网,还有腾讯的微博广场吧.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部. Masonry是一款很好用的jqu ...

  5. JS 瀑布流布局

    瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  6. 8款实用的Jquery瀑布流插件

    1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...

  7. 瀑布流布局使用详解——JQuery插件Isotope(动态实现子项目筛选)

    瀑布流布局,听起来听牛逼的样子,其实就是简单的子元素筛选功能.不过这一功能在网站页面布局当中还是很常用的,特别是在电商网站中 经常会有点一个钮筛选,然后页面的子元素刷的以下变了样.接下来,我们先简单介 ...

  8. 原生 JS 实现一个瀑布流插件

    更好的阅读体验,点击 原文地址 瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探 ...

  9. jQuery插件之-瀑布流插件

    jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...

随机推荐

  1. js渐变显示渐变消失

    以下是渐变的js代码(表示多余三行的要隐藏,点击"more"显示剩下的,点击“less”要逐渐隐藏): function showAccomplishmentTableRow(){ ...

  2. Android(java)学习笔记155:如何让你的GridView不再滚动

    GridView显示不完整的原因是因为,他的外层也套用了一个滑动的控件,这个解决办法是:重写GridView,是控制GridView不能滚动,就是写一个类继承GridView   代码如下: publ ...

  3. (转)CSS行高——line-height

    原文地址:http://www.cnblogs.com/dolphinX/p/3236686.html 初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了 ...

  4. (转)asp.net 高质量缩略图

    原文地址:http://www.cnblogs.com/Fooo/archive/2009/06/19/1506381.html using System.Drawing; ------------- ...

  5. 通过定时监听input框来实现onkeyup事件-

    问题:因为zepto无法使用onkeyup 事件 解决方法:通过给input框绑定focus 事件,定时的去监听input的值得改变,在鼠标移出input后,清除定时器 <!DOCTYPE ht ...

  6. 关于sqlserver 2008 远程导入表数据

    /*不同服务器数据库之间的数据操作*/ --创建链接服务器 exec sp_addlinkedserver   'ITSV ', ' ', 'SQLOLEDB ', '远程服务器名或ip地址 ' ex ...

  7. 常见错误总结_1_对java类进行修改后,无法按修改的类型加载

    1.这是因为没有run的原因,对类进行修改一定要run一遍 2.至于要不要重新tomcat部署,取决于你是修改了变量还是方法,拿不定的时候都重新加载一遍看看.

  8. cordova 创建ios项目

    cordova create fmscmsios1023 com.weilian.fmscms fmscms cd fmscms cd fmscmsios1023/ cordova platforms ...

  9. iOS开发——真机调试证书—发布证书

    (最近准备考试,空闲整理成博客……)

  10. java新手笔记20 抽象类模板(letter)

    1.抽象类 package com.yfs.javase; //信模板 public abstract class Templater { public abstract String toName( ...