Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下

关闭

搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

资源分类

AI智能 酷站推荐 招聘/兼职 框架/库 模块/管理 移动端UI框架 Web-UI框架 Js插件 Jquery插件 CSS相关 IDE环境 在线工具 图形动效 游戏框架 node相关 调试/测试 在线学习 社区/论坛 博客/团队 前端素材 图标/图库 建站资源 设计/灵感 IT资讯
提交资源 / 链接反馈

waterfall
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:http://wlog.cn/waterfall/
GitHub:https://github.com/bingdian/waterfall
网站描述:jquery 瀑布流布局插件, 类似于 Pinterest
访问官网 GitHub

这是瀑布流布局插件, 类似于 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

NameTypeDefault valueDescription
itemClsString'waterfall-item'瀑布流数据块class
prefixString'waterfall'瀑布流元素前辍
fitWidthBooleantrue是否自适应父元素宽度
colWidthInteger240瀑布流每列的宽度
gutterWidthInteger10数据块水平间距
gutterHeightInteger10数据块垂直间距
alignString'center'数据块相对于容器对齐方式,'align', 'left', 'right'
minColInteger1数据块最小列数
maxColIntegerundefined数据块最多显示列数,默认undefined,最大列数无限制
maxPageIntegerundefined最多显示多少页数据,默认undefined,无限下拉
bufferPixelInteger-50滚动时, 窗口底部到瀑布流最小高度列的距离 > bufferPixel时, 自动加载新数据
containerStyleObject{position: 'relative'}瀑布流默认样式
resizableBooleantrue缩放时是否触发数据重排
isFadeInBooleanfalse新插入数据是否使用fade动画
isAnimatedBooleanfalseresize时数据是否显示动画
animationOptionsObject{}resize动画效果,isAnimated为true时有效
isAutoPrefillBooleantrue当文档小于窗口可见区域,自动加载数据
checkImagesLoadedBooleantrue是否图片加载完成后开始排列数据块。如果直接后台输出图片尺寸,可设置为false,强烈建议从后台输出图片尺寸,设置为false
pathArray, Functionundefined瀑布流数据分页url,可以是数组如["/popular/page/", "/"] => "/popular/page/1/",或者是根据分页返回一个url方法如:function(page) { return '/populr/page/' + page; } => "/popular/page/1/"
dataTypeString'json'瀑布流返回数据格式,'json', 'jsonp', 'html'
paramsObject{}瀑布流数据请求参数,{type: "popular", tags: "travel", format: "json"} => "type=popular&tags=travel&format=json"
loadingMsgHtml见下面代码加载提示进度条,html
callbacksObject见下面代码callback
debugBooleanfalse开启debug


仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!

链接: https://fly63.com/nav/2412

more>>
相关栏目
jQuery之家
致力于搜集和整理各种jQuery插件,jQuery特效...
官网
fullPage.js
jQuery全屏滚动插件
官网 GitHub
Waterfall.js
瀑布流无限加载插件
官网 GitHub
Raty
一个非常棒的jQuery 评分插件
官网 GitHub
Bootstrap-waterfall
一款基于Bootstrap仿Pinterest网站的网格瀑布流插件
官网 GitHub
Jcrop
一个功能强大的 jQuery 图像裁剪插件
官网 GitHub
jcarousel
jQuery轮播图插件
官网 GitHub
Parallax.js
一款jQuery滚动视觉差插件
官网 GitHub
vegas
一个jQuery / Zepto幻灯片插件
官网 GitHub
paroller.js
一款轻量级的页面滚动视觉差特效jquery插件
官网 GitHub
lazyload.js
jquery图片懒加载插件
官网 GitHub
alertify.js
jQuery酷炫的各种消息提示插件
官网 GitHub
pickadate.js
一个轻量级的 jQuery 日期选择插件
官网 GitHub
chosen.js
基于jquery的下拉选择框美化插件
官网 GitHub
threesixty.js
360度产品图片预览jQuery插件
官网 GitHub
textillate.js
实现动感的 CSS3 文本动画的简单插件
官网 GitHub
首页 技术导航 在线工具 技术文章 教程资源 AI工具集 前端库/框架 实用工具箱

Copyright © 2018 Web前端开发网提供免费在线工具、编程学习资源(教程/框架/库),内容以学习参考为主。All Rights Reserved. 网站备案号:蜀ICP备13022973号

手机预览