JavaScript实现无限滚动加载数据

实现滚动的第一步是使用onscroll事件处理程序。

无限滚动是指滑动滚动条实现数据块的无限加载。

我们使用瀑布流布局实现无限加载。瀑布流是等宽不等高的数据块布局。当滚动条被拉下时，它将加载。那么问题是确定应该在什么时候加载。

首先要了解瀑布流布局的特点。它总是将下一张图片放在当前列数最少的列中。所以最后一张蓝色图片加载后，无疑会是最后一张图片。因此，需要判断图片加载到什么程度才能触发滚动事件。图形上的灰色表示页面的大小，后面的蓝色边框表示窗口的大小。拖动滚动条时，灰色部分会向上移动。我们希望在页面的最后一张图片(蓝色图片)加载一半时触发滚动事件。那么就要形成一个参照物。

写下代码：

//检查滚动条是否有加载数据块的条件。function checkscroll slide(){ var o parent=document . getelementbyid(' main ')；var oBoxs=getByClass(oparent，‘box’)；var scrollH=document . body . scroll top | | document . document element . scroll top document . body . client height | | document . document element . client height；var LastBoxH=ObOxs[ObOxs . length-1]。offset top Math . floor(OboXs[OboXs . length-1]。offset ThEight/2)；return (lastBoxH scrollH)？真：假；}getClass是一个自己编写的函数，根据类名查找元素集合，后面会附上源代码

要加载的数据块的格式如下。每张图片都用一个div包装，class=pic。最后，整体属于父元素main

Div id=' main ' Div class=' box ' Div class=' pic ' img src=' images/0 . jpg '/Div/Div class=' box ' Div class=' pic ' img src=' images/1 . jpg '/Div/Div class=' box ' Div class=' pic ' img src=' images/2 . jpg '/Div/Div首先，我们要加载的数据块应该从后台传输。这里我们可以用json进行模拟：

var DataIn={ ' data ' :[{ ' src ' : ' 0 . jpg ' }，{'src':'1.jpg'}，{'src':'2.jpg'}，{'src':'3.jpg'}，{'src':'4.jpg'}，{ ' src ' : ' 5 . jpg ' } }；

例如，这是来自后台的数据。

上面的函数返回一个布尔值，当它为真时，滚动事件被触发。

window . on scroll=function(){ var opa rent=document . getelementbyid(' main ')；//当满足加载条件时，数据块if(checkscrolslide){ for(var I=0；I data in . data . length；I){ var oBox=document . create element(' div ')；oBox.className=' boxopa rent . appendchild(ObOx)；var opic=document . create element(' div ')；opic.className=' picobox . appendchild(opic)；var oImg=document . create element(' img ')；oImg.src='。/images/' DataIn.data[i]。srcopic . appendchild(oImg)；} waterFull('main '，' box ')；}}}附上源代码：

Css和html

！doctype htmlhearteta charset=' utf-8 '/src脚本='。/jswaterfll . js '/脚本标题朱塞佩朱塞佩/title style type=' text/CSS ' * { 0填充： 0px边际： 0 px} #main{相对位置：}。方框{/*显示器3330线内块；*/填充： 15像素0像素0像素15像素浮动3360左；}。pic{填充336360 10px边界半径： 5px边界：1像素固体#ccc盒影： 0 5px # CCC}。pic img{宽度： 165像素高度：辆汽车；}/style/head body div id=' main ' div class=' box ' div class=' pic ' img src=' images/3。jpg '/div/div class=' box ' div class=' images/4。jpg '/div/div class=' box ' div class=' images/20。jpg '/div/div/div class=' box ' div class=' pic ' img src=' images/21。jpg '/div/div class=' box ' div class='=' pic ' img src=' images/3。jpg '/div/div class=' box ' div class=' pic ' img src=' images/4。jpg '/div/div class=' box ' div class=' images/5。jpg '/div/div/div class=' box ' div class=' pic ' img src=' images/6。jpg '/div/div class=' box ' div class=' pic ' img src=' images/7。jpg '/div/div class=' box ' div class=' pic ' img src=' images/9。jpg '/div/div class=' box ' div class=' pic ' img src=' images/10。jpg '/div/div class=' pic ' img src=' images/11。jpg '/div/div class=' box ' div class=' pic ' img src=' images/17。jpg '/div/div class=' box ' div class=' pic ' img src=' images/18。jpg '/div/div class=' box ' div class=' pic ' img src=' images/4。jpg '/div/div class=' box ' div class=' pic ' img src=' images/5。jpg '/div/div class=' box ' div class=' pic ' img src=' images/6。jpg '/div/div class=' box ' div class=' pic ' img src '=' images/7。jpg '/div/div class=' box ' div class=' pic ' img src=' images/8。jpg ' images/11。jpg '/div/div class=' box ' div class=' pic ' img src '=' images/12。jpg '/div/div class=' box ' div class=' pic ' img src=' images/13。jpg '/div/div class=' box ' div class=' images/14。jpg '/div/div class=' box ' div class=' pic ' img src=' images/15。jpg '/div/div class=' box ' div class=' pic '=' div/div class=' pic ' img src=' images/17。jpg '/div/div class=' box ' div class=' pic ' img src=' images/18。jpg '/div/div class=' box ' div class=' pic ' img src=' images/19。jpg '/div/div class=' box ' div class=' images/20。jpg '/div/div class=' box ' div class=' pic ' img src=' images/21。jpg '/div/div/div/body/html js云娥：

窗户。onload=function(){ water full(' main '，' box ')；var data in={ ' data ' 3360[{ ' src ' 3360 ' 0。jpg ' }，{ ' src ' : ' 1。jpg ' }，{ ' src ' : ' 2。jpg ' }，{ ' src ' : ' 3。jpg ' }，{ ' src ' : ' 4。jpg ' }，{ ' src ' 3360 ' 5。jpg ' } }窗户。onscroll=function(){ var opaque=document。get元素byid(' main ')；如果(校验和读取){ for(var I=0)；数据输入数据长度参数：(一){ var obex=document。创建元素(' div ')；obox。盒子不透明追加子对象(obex)；var opic=文档。创建元素(' div ')；opic。微微盒。appendchild(鸦片剂);var oimg=文档。创建元素(' img ')；oImg.src=' ./images/' DataIn.data[i].src(中央支助事务厅);opic.appendChild(国际兽疫局);} waterFull('main '，' box ')；} }函数waterFull(父项，子项){ var opart=document。getelement byid(父项);//var obxs=parent。查询selectorall(').盒子；var oboxs=getbyclass(不透明，子级);//范希洛范希洛范希洛var obxw=obxs[0].偏移宽度；var cols=数学。楼层(文件。文档元素。客户端宽度/obo xw)；//沙吾提手！手云娥，1826年不透明。风格。CSS text=' width 3360 ' obo xw * cols ' px；利润：汽车；//阿叔阿叔阿叔阿叔阿叔阿叔阿叔阿叔，何钟泰？何钟泰？何钟泰//是魏冄吗，哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟，你好吗？你好吗var arr=[]:for(var I=0)；双簧管。长度；如果我。push(obo xs[I]).右偏(偏移高度):} else { var Minh=math。量滴apply(null，arr hvar miniindex=getminindex(arr，Minh)；obo xs[I]。风格。位置='绝对'；obxs[I]。风格。top=我的‘px’；//obxs[I]。风格。left=miniindex * obxw ' pxobxs[I]。风格。left=obxs[微型索引]。offsetleft ' pxarr[mini index]=obxs[I].偏移高度；} }函数getByClass(父类，类名){ var box arr=new array()；//范思哲范思哲类吾曰盒子！盒子阿琼元素=父元素。get element sbytname(' * ')；for(var I=0)；我。元素。长度；(i ) {如果(元素[i]).类名==类名{ box arr。推送(元素[I])；}:归还拳击馆；}//范琼？范琼函数getminindex(数组，最小值){ for(数组中的var I){ if(array[I]==min)返回I；}//吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲，吴亚玲function checkscrollide(){ var opaque=document。getelement byid(' main ')；var oboxs=getbyclass(不透明、方块);var滚动h=文档。尸体。向上滚动| |文档。文档元素。滚动顶部文档。尸体。客户端高度|。文件。文档元素。客户身高；var load oxh=obxs[obxs。长度-1].场外数学。地板(obxs[obxs。长度-1]).偏右/2:返回（负载循环)?true : false}朱塞佩朱塞佩朱塞佩朱塞佩，阿云阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜阿云娜，吴亚玲吴亚玲吴亚玲。