刚访问页面只显示8张图片，滚动条拖到底部后再通过ajax更新数据
models.py，数据库类
class ImgInfo(models.Model): state_choice = ( (0,'展示'), (1,'不展示'), ) state = models.SmallIntegerField(choices=state_choice,default=0,verbose_name='是否展示') title = models.CharField(max_length=32,verbose_name='标题') message = models.CharField(max_length=48,verbose_name='简介') img = models.ImageField(upload_to='./static/img/meinv/',verbose_name='图片地址') class Meta: db_table = 'imginfo' verbose_name_plural = '图片库' def __str__(self): return self.title
urls.py ，路由
re_path('^img.html$', views.img), re_path('^get_img.html$', views.get_img),
views.py 逻辑处理
def img(request): logo = models.Logo.objects.all().first() menu_nav = models.MenuNav.objects.all().order_by('-width') return render(request,'img.html',{ 'menu_nav': menu_nav, 'Logo': logo, }) def get_img(request): import json mid = request.GET.get('mid') img_list = models.ImgInfo.objects.filter(id__gt=mid).values('id','img','title')[:8] result = { 'status': True, 'data': None } if img_list: result['data'] = list(img_list) else: result['status'] = False return HttpResponse(json.dumps(result))
img.html 页面
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <style> 8 body{ 9 margin: auto; 10 } 11 .outer { 12 width: 1000px; 13 margin-left: 200px; 14 } 15 .img_item{ 16 width: 25%; 17 float: left; 18 } 19 .img_item img { 20 width: 100%; 21 margin-left: 10px; 22 margin-top: 10px; 23 } 24 .img_item p{ 25 display: inline-block; 26 width: 100%; 27 text-align: center; 28 } 29 </style> 30 <body> 31 32 <div class="outer"> 33 <div class="img_item"></div> 34 <div class="img_item"></div> 35 <div class="img_item"></div> 36 <div class="img_item"></div> 37 </div> 38 39 <script src="/static/js/jquery-3.1.1.js"></script> 40 <script> 41 $(function () { 42 var obj = new ImgInfo(); 43 obj.img_init(); 44 obj.scroll_func(); 45 }) 46 47 function ImgInfo() { 48 this.nid = 0; //用来记录页面上显示的图片数量 49 this.last_position = -1; //记录最后一次div位置 50 this.is_end = false; //来确认后端是否已经没有数据 51 this.img_init = function () { 52 that = this 53 $.ajax({ 54 url:'get_img.html', 55 type:'GET', 56 dataType:'JSON', 57 data:{'nid':that.nid}, 58 success:function (arg) { 59 if (arg.status){ 60 var data = arg['data']; 61 $.each(data,function (index,v) { 62 63 var i = (index+that.last_position+1) % 4 ; 64 var img_ele = $('<img>'); 65 img_ele.attr('mid',v.id); 66 img_ele.attr('src',v.img); 67 var p_ele = $('<p>').html(v.title); 68 $('.outer').children().eq(i).append(img_ele); 69 $('.outer').children().eq(i).append(p_ele); 70 if((index+1)== data.length){ 71 that.last_position = i; 72 that.nid = v.id; 73 } 74 75 }) 76 }else { 77 that.is_end = true; 78 } 79 80 } 81 }) 82 } 83 this.scroll_func = function () { 84 var that = this 85 $(window).scroll(function () { 86 var doc_height = $(document).height(); //html文档的高度 87 var win_height = $(window).height(); //窗口的高度 88 var scroll_height = $(window).scrollTop(); //滚动高度 89 //当窗口高度 加上 滚动高度 等于 文档高度时 就说明已经拉到底了 90 if((scroll_height+win_height)==doc_height){ 91 if(!that.is_end){ 92 that.img_init() 93 } 94 95 } 96 }) 97 } 98 } 99 100 101 102 </script> 103 104 </body> 105 </html>