如何使用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 瀑布流布局插件的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！