<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .w{ width: 1000px; margin: 0 auto; } .item{ width: 25%; {#每一个照片宽度占百分之25#} float: left; } .item img{ width: 100%; } </style> </head> <body> <div class="w" id="container"> {#设置4个div，每一个div占一列，一排占4张照片#} <div class="item"> {#循环的第一张#} {#循环的第五张#} </div> <div class="item"> {#循环的第二张#} {#循环的第六张#} </div> <div class="item"> {#循环的第三张#} {#循环的第七张#} </div> <div class="item"> {#循环的第四张#} {#循环的第八张#} </div> </div> <script src="/static/jquery-1.12.4.js"></script> <script> $(function () { var obj = new ScrollImg(); //通过new调用ScrollImg类里的function()函数，this=obj(NID和LASTPOSITION) obj.fetchImg(); //调用fetchImg()函数，这个函数里的this=obj(NID和LASTPOSITION) obj.scrollEvent(); //调用滚轮scrollEvent()函数 }); function ScrollImg() { //第一步：当初次加载时候执行ScrollImg() this.NID = 0; //NID记录每次读到照片的数量显示出来：默认是0 this.LASTPOSITION = 3; //每次循环最后的位置：默认是3 this.fetchImg = function () { //调用fetchIm var that = this; //将当前的this对象复制一份到that变量中 $.ajax({ //通过ajax把照片获取到 url: '/get_imgs.html', type: 'GET', data:{nid:that.NID}, //把NID传到后端 dataType: 'JSON', success:function (arg) { //arg是整个后端传来的内容 var img_list = arg.data; //arg.data是列表,,赋值给img_list=[{"src":"static/upload/1_336_o8hpAYb.JPG","title":"梨","id":2},{},{}] $.each(img_list,function (index,v) { //对img_list循环的里面每一个元素是一个一个的字典 img_list(index是索引0,v是img_list=[{"src":"static/upload/1_336_o8hpAYb.JPG","title":"梨","id":2},{},{}]) var eqv = (index + that.LASTPOSITION + 1) % 4; //求余(index(1)+that.LASTPOSITION(3)+1)/4余0的顺序赋值给eqv //console.log(eqv); var tag = document.createElement('img'); //生成img标签赋值给tag：<img src=""> tag.src = '/'+ v.src; //生成整体tag标签，v.src是图片路径：<img src="static/upload/1_336_o8hpAYb.JPG"> $('#container').children().eq(eqv).append(tag); //找container下面的孩子4个div通过eqv 0 1 2 3的顺序把创建的tag标签放进去 //当循环最后一张图片时，将图片的ID赋值给NID if (index + 1 == img_list.length) { //索引加一等于长度的时候 that.LASTPOSITION = eqv; //记录每次循环最后一次位置 that.NID = v.id; //v.id是2 } }) } }) }; this.scrollEvent = function () { //调用scrollEvent //当滚轮达到最底部时，从新执行initImg函数() var that = this; //将当前的this对象复制一份到that变量中 $(window).scroll(function () { //绑定事件 //什么时候达到最底部？ //文档高度(body占多高) //窗口高度(内容站多高) //窗口高度和文档高度差的是滚动条可滑动的高度 //窗口高度+滚轮滑动的高度=文档高度就是到达最底部了 var scrollTop = $(window).scrollTop(); //滑轮滚动的高度 var winHeight = $(window).height(); //获取窗口高度 var docHeight = $(document).height(); //获取文档高度 if (scrollTop + winHeight == docHeight) { //如果窗口高度+滚轮滑动的高度=文档高度就是到达最底部了 //console.log(1); that.fetchImg(); } }) } } </script> </body> </html>