相信很多人都见过瀑布流图片布局，那些图片是动态加载出来的，效果很好，对服务器的压力相对来说也小了很多，用鼠标操作的时候相信都见过这样的效果：进入qq空间，向下拉动空间，到底部时，会动态加载剩余的说说或者是日志 ，今天我们就来看看他们的实现思路和js控制动态加载的代码。
下面的代码主要是控制滚动条下拉时的加载事件的，无论是加载图片还是加载记录数据  都可以。
加载jquery库后我们可以这样使用：
$(window).scroll(function () { var scrolltop = $(this).scrolltop(); var scrollheight = $(document).height(); var windowheight = $(this).height(); if (scrolltop + windowheight == scrollheight) { //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作//var page = 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() { 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); }); } }