此版本，是方式二的升级版，一，将全局变量封装到函数内，二，添加滚轮，可以持续取数据
url文件
from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ path('admin/', admin.site.urls), path('img.html/', views.img), path('get_img.html/', views.get_img), ]
views文件
from django.shortcuts import render,HttpResponse from django.http import JsonResponse from app01 import models def img(request): return render(request,'img.html') def get_img(request): import json nid = request.GET.get('nid') img_list = models.Img.objects.filter(id__gt=nid).values('id','src','title') #获取数据库的中数据 img_list = list(img_list) ret = {'status':True,'data':img_list} # return HttpResponse(json.dumps(ret)) return JsonResponse(ret)
html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .w{ width: 1000px; margin: 0 auto; } .item{ width: 25%; float: left; } .item img{ width: 100%; } </style> </head> <body> <div>风景图片</div> <div class="w"> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> </div> <script src="/static/jquery-3.3.1.js"></script> <script> $(function () { var obj = new ScrollImg() obj.initImg() obj.scrollEvent() }) function ScrollImg() { this.nid=0; this.lastPostion=3; var that = this this.initImg = function () { $.ajax({ url:'/get_img.html', type:'GET', data:{'nid':that.nid}, dataType:'JSON', success:function (arg) { var img_list = arg.data $.each(img_list,function (index,v) { var eqv = (index+that.lastPostion +1) % 4; console.log(eqv) {#eqv就是图片的索引位置，加that.lastpostion+1 是为了第二次取到数据后，紧接继续拜访#} {# index是循环的索引，v是去到的值（字典形式的）#} var tag = document.createElement('img'); {#创建一个img标签，标签的地址是'/'+v.src，然后将标签添加到对应的子标签#} tag.src='/'+v.src $('.w').children().eq(eqv).append(tag); {# 当循环到最后一个的时候，将图片ID复制给 NID #} if(index+1 == img_list.length){ {#that.nid = v.id#} {# that.nid是向后台发送的nid,因为图片少，所以需要注掉先 #} that.lastPostion = eqv } }) } }) }; this.scrollEvent = function () { $(window).scroll(function () { {# 什么时候滚轮到达最底部 #} {# 文档高度：可以理解为body高度#} var docHeight = $(document).height() {# 窗口高度：屏幕窗口#} var winHeight = $(window).height() {# 滚动条滑动的高度#} var scrollTop = $(window).scrollTop() if(winHeight+scrollTop == docHeight){ that.initImg(); } }) } } {# 设置NID为全局变量，第一次ajax发送时是0.这时ajax只会从数据库取一部分数据，等滚轮划到底部，再出发ajax,再继续取值#} {# 下面可以监听鼠标滚轮动作，当滚轮到最底部时，继续执行initImg函数，然后到数据库中再取一次 #} </script> </body> </html>