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

如何使用waterfalljquery 瀑布流布局插件？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

　　waterfall是jquery瀑布流布局插件，這是瀑布流布局插件,類似于Pinterest、花瓣、發(fā)現(xiàn)啦。如果瀑布流的塊中包含圖片，則需要事先知道圖片的高度(其實就是為了要計算出整個塊的高度，以便精確定位)，圖片的高度可以從服務(wù)器返回，本插件是整合planeArt的一個圖片預(yù)加載小插件，可以快速獲取圖片的寬高，無需服務(wù)器返回。

　　waterfall實現(xiàn)的功能有：

　　定義了列寬，根據(jù)頁面大小自動排列

　　可事先放置塊。(如將一個目錄欄作為瀑布流的第一塊磚頭放在左上角)

　　圖片大小根據(jù)列寬等比例縮放(ie6下會失真，無法解決)

　　自定義異步請求函數(shù)（返回JSON，json格式與html模板對應(yīng)即可，默認(rèn)格式請看demojson.js）

　　自定義html模板

　　waterfall的使用

　　html：

　　<divid="container"></div>

　　引入jquery，handlebars和waterfall(注：waterfall默認(rèn)返回json格式數(shù)據(jù)并使用handlebars模板渲染json數(shù)據(jù)，你也可以在options中配置使用其它JavaScript模板如mustache解析json數(shù)據(jù)或者直接返回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:{

　　 },

看完上述內(nèi)容，你們掌握如何使用waterfalljquery 瀑布流布局插件的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！