jquery 瀑布流插件

2019-09-09 郑州网站建设  

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

文档 项目地址

https://github.com/bingdian/waterfall

download

downloadwaterfall插件最新版本。

使用

html:

<div id="container"></div>

引入jquery,handlebars和waterfall(注:waterfall默认返回json格式数据并使用handlebars源码渲染json数据,你也可以在options中配置使用其它javascript源码如mustache解析json数据或者直接返回html):

<script src=http://www.divcss5.com/html5/"/path/jquery.min.js"></script><script src="/path/handlebars.js"></script><script src=http://www.divcss5.com/html5/"/path/waterfall.min.js"></script>

template:

<script id="waterfall-tpl" type="text/x-handlebars-template"> //template content</script>

script:

$('#container').waterfall(options); 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  

河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1533.html转载请标明出处,谢谢合作!
标签:
  • 布局
  • 插件
  • jQuery
  • 瀑布
  • 类似
  • Pint