一.js代碼
ajax函數(shù)

//瀑布流數(shù)據(jù) var getData = function (i,url,name){$.post(url,{p:i},function(data){if(data.status){if(data.list !==null) {$(name).before(data.list), $(name).val(data.page);}}else{alert(data.info);}}); }

前臺代碼

$(document).ready(function (){var nScrollHight = 0; //滾動(dòng)距離總長(注意不是滾動(dòng)條的長度)var nScrollTop = 0; //滾動(dòng)到的當(dāng)前位置var nDivHight = $("#masonry").height();//獲取單個(gè)div元素的滾動(dòng)條 這里如果需要獲取窗口的滾動(dòng)條的話，修改獲取的滾動(dòng)高度即可。$("#masonry").scroll(function(){nScrollHight = $(this)[0].scrollHeight;nScrollTop = $(this)[0].scrollTop;if(nScrollTop + nDivHight >= nScrollHight){var page = $("#masonry_page").val();getData(page,"/masonry/id/2","#masonry_page");}});});

html代碼

<div id="masonry"><input type="hidden" id="masonry_page" value="1"> </div>

注釋：后臺代碼自行書寫吧，類似分頁的實(shí)現(xiàn)方式比較簡單，后臺輸出html的代碼，前臺直接接受并添加（json數(shù)據(jù)）。

分享：在這里博主給大家推薦一個(gè)賬號管理工具了，如果有朋友賬號太多，經(jīng)常忘記密碼，而且密碼太過復(fù)雜記不住，那么你有福了。在這里給大家推薦一個(gè)網(wǎng)站 51PassWord，博主也在用，希望能夠幫助到大家。

總結(jié)

以上是生活随笔為你收集整理的js结合jquery实现的ajax瀑布流加载实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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