插件——jQuery.Waterfall

思路：

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

注意的地方：

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

實現的功能有：

定義了列寬，根據頁面大小自動排列

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

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

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

自定義html模板

用法：

$(‘#id‘).waterfall({

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

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

colWidth: 235, // 列寬

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

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

perNum: ‘auto‘, // 每次下拉時顯示多少個(int)(默認是列數)

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

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

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

ajaxFunc: null, // 自定義異步函數, 第一個參數為成功回調函數，第二個參數為失敗回調函數

// 當執行成功回調函數時，傳入返回的JSON數據作為參數

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

});

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

其實這也不算得上一個插件，因為通用性實在不怎樣，分頁功能也沒實現，不過可以做個參考。(轉載來的)

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。