网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

如何使用waterfalljquery瀑布流布局插件-创新互联

如何使用waterfalljquery 瀑布流布局插件?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

“只有客户发展了,才有我们的生存与发展!”这是创新互联公司的服务宗旨!把网站当作互联网产品,产品思维更注重全局思维、需求分析和迭代思维,在网站建设中就是为了建设一个不仅审美在线,而且实用性极高的网站。创新互联对成都网站制作、成都网站设计、网站制作、网站开发、网页设计、网站优化、网络推广、探索永无止境。

waterfall是jquery瀑布流布局插件,这是瀑布流布局插件,类似于Pinterest、花瓣、发现啦。如果瀑布流的块中包含图片,则需要事先知道图片的高度(其实就是为了要计算出整个块的高度,以便精确定位),图片的高度可以从服务器返回,本插件是整合planeArt的一个图片预加载小插件,可以快速获取图片的宽高,无需服务器返回。

waterfall实现的功能有:

定义了列宽,根据页面大小自动排列

可事先放置块。(如将一个目录栏作为瀑布流的第一块砖头放在左上角)

图片大小根据列宽等比例缩放(ie6下会失真,无法解决)

自定义异步请求函数(返回JSON,json格式与html模板对应即可,默认格式请看demojson.js)

自定义html模板

waterfall的使用

html:

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

template:

//templatecontent

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:{

 },

看完上述内容,你们掌握如何使用waterfalljquery 瀑布流布局插件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


文章标题:如何使用waterfalljquery瀑布流布局插件-创新互联
分享网址:http://bjjierui.cn/article/iepej.html

其他资讯