相信很多人都見過瀑布流圖片布局，那些圖片是動(dòng)態(tài)加載出來的，效果很好，對(duì)服務(wù)器的壓力相對(duì)來說也小了很多，用鼠標(biāo)操作的時(shí)候相信都見過這樣的效果：進(jìn)入qq空間，向下拉動(dòng)空間，到底部時(shí)，會(huì)動(dòng)態(tài)加載剩余的說說或者是日志 ，今天我們就來看看他們的實(shí)現(xiàn)思路和js控制動(dòng)態(tài)加載的代碼。
下面的代碼主要是控制滾動(dòng)條下拉時(shí)的加載事件的，無論是加載圖片還是加載記錄數(shù)據(jù) 都可以。
加載jQuery庫后我們可以這樣使用：
$(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if (scrollTop + windowHeight == scrollHeight) { //此處是滾動(dòng)條到底部時(shí)候觸發(fā)的事件，在這里寫要加載的數(shù)據(jù)，或者是拉動(dòng)滾動(dòng)條的操作//var page = Number($("#redgiftNextPage").attr('currentpage')) + 1;//redgiftList(page);//$("#redgiftNextPage").attr('currentpage', page + 1); } });解析：
判斷滾動(dòng)條到底部，需要用到DOM的三個(gè)屬性值，即scrollTop、clientHeight、scrollHeight。
從這個(gè)三個(gè)屬性的介紹就可以看出來，滾動(dòng)條到底部的條件即為scrollTop + clientHeight == scrollHeight。
純js我們可以這樣做：
window.onscroll = function() { var scrollTop = document.body.scrollTop; var offsetHeight = document.body.offsetHeight; var scrollHeight = document.body.scrollHeight; if (scrollTop == scrollHeight - offsetHeight) { page++; loadList(page); } }; function loadList(page) { page = page || 1; if (isLoad) { getJSON('/forum.php?mod=hot&page=' + page).then(function(data) { if (data.code == 200) { data = data.data; if (data && Object.keys(data).length > 0) { for (var k in data) { var v = data[k]; detailTemplate = detailTemplate.cloneNode(true); var userInfoObj = detailTemplate.getElementsByClassName('user-info')[0]; userInfoObj.getElementsByClassName('name')[0].innerText = v.author; userInfoObj.getElementsByClassName('avatar')[0].src = v.avatar; userInfoObj.getElementsByClassName('post-time')[0].innerHTML = v.lastpost; detailTemplate.getElementsByClassName('title')[0].innerText = v.subject; detailTemplate.getElementsByClassName('desc')[0].innerText = v.subject; var extInfoObj = detailTemplate.getElementsByClassName('ext-info')[0]; extInfoObj.getElementsByClassName('from')[0].innerText = v.fname; extInfoObj.getElementsByClassName('view-time')[0].innerText = v.views; postListObj.appendChild(detailTemplate); } } else { isLoad = false; } } else { isLoad = false; } }, function(status) { console.log('Something went wrong, status is ' + status); }); } }
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
