>>>model class Img(models.Model): src = models.FileField(verbose_name='路径',upload_to='static/img') class Meta: verbose_name_plural = '图片' >>>views import json def imgback(request): nid = request.GET.get('nid') #获取的是QuerySet数据类型 img_list = Img.objects.values('id','src') # 将QuerySet数据类型转换成列表 img_list = list(img_list) ret = { 'status': True, 'data': img_list, } return HttpResponse(json.dumps(ret)) >>>html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .content{ width: 1000px; margin: 0 auto; } .item{ width: 25%; float: left; } .item img{ width: 100%; } </style> </head> <body> <div class="content" id="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <script src="/static/js/jquery-3.3.1.js"></script> <script> $(function () { intImg(); scoreEvent(); }); NID=0; LASTPOSION = 0; function intImg() { $.ajax({ url:'/imgback/', type:'GET', data:{nid:NID}, success:function (arg) { ret = JSON.parse(arg); var img_list = ret.data; $.each(img_list,function (index,v) { var eqv = (index+LASTPOSION+1)%4; var tag = document.createElement('img'); tag.src = '/'+v.src; $("#container").children().eq(eqv).append(tag); //当循环到最后一个图片时，将图片id赋值给nid if(index+1 == img_list.length){ NID = v.id LASTPOSION = eqv } }) } }) } function scoreEvent() { $(window).scroll(function () { //文档高度 var docHeight = $(document).height(); //窗口高度 var winHeight = $(window).height(); //滚动条可滑动的高度 var scrollTop = $(window).scrollTop(); console.log(docHeight,winHeight,scrollTop); if((winHeight + scrollTop)+1 >= docHeight){ console.log(1); intImg() } }) } </script> </body> </html> from django.http import JsonResponse
return JsonResponse(ret)
