使用jQuery或者原生js实现鼠标滚动加载页面新数据
相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多,用鼠标操作的时候相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志,今天我们就来看看他们的实现思路和js控制动态加载的代码。
下面的代码主要是控制滚动条下拉时的加载事件的,无论是加载图片还是加载记录数据 都可以。
加载jQuery库后我们可以这样使用:
$(window).scroll(function(){ varscrollTop=$(this).scrollTop(); varscrollHeight=$(document).height(); varwindowHeight=$(this).height(); if(scrollTop+windowHeight==scrollHeight){ //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作 //varpage=Number($("#redgiftNextPage").attr('currentpage'))+1; //redgiftList(page); //$("#redgiftNextPage").attr('currentpage',page+1); } });
解析:
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。
- scrollTop为滚动条在Y轴上的滚动距离。
- clientHeight为内容可视区域的高度。
- scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。
从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop+clientHeight==scrollHeight。
纯js我们可以这样做:
window.onscroll=function(){ varscrollTop=document.body.scrollTop; varoffsetHeight=document.body.offsetHeight; varscrollHeight=document.body.scrollHeight; if(scrollTop==scrollHeight-offsetHeight){ page++; loadList(page); } }; functionloadList(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(varkindata){ varv=data[k]; detailTemplate=detailTemplate.cloneNode(true); varuserInfoObj=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; varextInfoObj=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('Somethingwentwrong,statusis'+status); }); } }