这是瀑布流结构插件, 类似于 Pinterest、花瓣、发现啦。

使用

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><img src="data:image/gif;base64" 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