如何使用waterfalljquery 瀑布流布局插件？相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。
waterfall是jquery瀑布流布局插件，這是瀑布流布局插件,類似于Pinterest、花瓣、發(fā)現(xiàn)啦。如果瀑布流的塊中包含圖片，則需要事先知道圖片的高度(其實(shí)就是為了要計(jì)算出整個(gè)塊的高度，以便精確定位)，圖片的高度可以從服務(wù)器返回，本插件是整合planeArt的一個(gè)圖片預(yù)加載小插件，可以快速獲取圖片的寬高，無需服務(wù)器返回。
waterfall實(shí)現(xiàn)的功能有：
定義了列寬，根據(jù)頁面大小自動(dòng)排列
可事先放置塊。(如將一個(gè)目錄欄作為瀑布流的第一塊磚頭放在左上角)
圖片大小根據(jù)列寬等比例縮放(ie6下會(huì)失真，無法解決)
自定義異步請求函數(shù)（返回JSON，json格式與html模板對應(yīng)即可，默認(rèn)格式請看demojson.js）
自定義html模板
waterfall的使用
html：
引入jquery，handlebars和waterfall(注：waterfall默認(rèn)返回json格式數(shù)據(jù)并使用handlebars模板渲染json數(shù)據(jù)，你也可以在options中配置使用其它JavaScript模板如mustache解析json數(shù)據(jù)或者直接返回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:{
},
看完上述內(nèi)容，你們掌握如何使用waterfalljquery 瀑布流布局插件的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
重慶分公司
重慶分公司
