如何使用waterfalljquery 瀑布流布局插件

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

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

　　waterfall实现的功能有：

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

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

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

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

　　自定义html模板

　　waterfall的使用

　　html：

　　<divid="container"></div>

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

　　<scriptsrc="/path/jquery.min.js"></script>

　　<scriptsrc="/path/handlebars.js"></script>

　　<scriptsrc="/path/waterfall.min.js"></script>

　　template:

　　<scriptid="waterfall-tpl"type="text/x-handlebars-template">

　　//templatecontent

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

　　 },

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