插件——jQuery.Waterfall

思路：

其實(shí)只要了解了整個(gè)流程，要實(shí)現(xiàn)這個(gè)插件也不難，大家都玩過俄羅斯方塊吧，原理差不多，找到合適的地方疊上去就好了，在這里，每個(gè)塊的寬度是必需給定的，然后計(jì)算出列數(shù)，再維護(hù)一個(gè)數(shù)組，存儲每列的高度，往最小高度的列添加塊即可。滾動時(shí)，當(dāng)最小高度出現(xiàn)在可視窗口時(shí)就啟動ajax從服務(wù)器拉取更多的數(shù)據(jù)。

注意的地方：

如果瀑布流的塊中包含圖片，則需要事先知道圖片的高度(其實(shí)就是為了要計(jì)算出整個(gè)塊的高度，以便精確定位)，圖片的高度可以從服務(wù)器返回，本插件是整合

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

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

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

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

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

自定義html模板

用法：

$(‘#id‘).waterfall({

itemClass: ‘wf_item‘, // 磚塊類名

imgClass: ‘thumb_img‘, // 圖片類名

colWidth: 235, // 列寬

marginLeft: 15, // 每列的左間寬

marginTop: 15, // 每列的上間寬

perNum: ‘a(chǎn)uto‘, // 每次下拉時(shí)顯示多少個(gè)(int)(默認(rèn)是列數(shù))

isAnimation: true, // 是否使用動畫效果

ajaxTimes: ‘infinite‘, // 限制加載的次數(shù)(int) 字符串‘infinite‘表示無限加載

url: null, // 數(shù)據(jù)來源(ajax加載，返回json格式)，傳入了ajaxFunc參數(shù)，此參數(shù)將無效

ajaxFunc: null, // 自定義異步函數(shù), 第一個(gè)參數(shù)為成功回調(diào)函數(shù)，第二個(gè)參數(shù)為失敗回調(diào)函數(shù)

// 當(dāng)執(zhí)行成功回調(diào)函數(shù)時(shí)，傳入返回的JSON數(shù)據(jù)作為參數(shù)

createHtml: null // 自定義生成html字符串函數(shù),參數(shù)為一個(gè)信息集合，返回一個(gè)html字符串

});

本插件支持IE6+、chrome、firefox、opera、safari等主流瀏覽器。

其實(shí)這也不算得上一個(gè)插件，因?yàn)橥ㄓ眯詫?shí)在不怎樣，分頁功能也沒實(shí)現(xiàn)，不過可以做個(gè)參考。(轉(zhuǎn)載來的)

總結(jié)

以上是生活随笔為你收集整理的php ajax jquery瀑布流,jQuery瀑布流插件——jQuery.Waterfall的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。