扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
如何使用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 瀑布流布局插件的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网