###############################
class Picture(models.Model): src = models.ImageField(verbose_name=‘图片路径‘, upload_to=‘./static/images/picture/‘) title = models.CharField(verbose_name=‘标题‘, max_length=32) summary = models.CharField(verbose_name=‘简介‘, max_length=32) class Meta: verbose_name_plural = ‘图片‘ def __str__(self): return self.title
Models.py Code
##############################
1 def picture(request): 2 picture_list = models.Picture.objects.all() 3 return render(request, ‘picture.html‘, locals()) 4 5 def get_img(request): 6 nid = request.GET.get(‘nid‘) 7 picture_list = models.Picture.objects.filter(id__gt=nid).values(‘id‘,‘title‘,‘src‘) 8 # print(picture_list) # <QuerySet [{‘k1‘:v1,‘k1:v2‘},{‘k1‘:v3,‘k1:v4‘}]> 9 picture_list = list(picture_list) 10 # print(picture_list) # [{‘k1‘:v1,‘k1:v2‘},{‘k1‘:v3,‘k1:v4‘}] 11 ret = {‘status‘:True,‘data‘:None} 12 ret[‘data‘] = picture_list 13 14 return HttpResponse(json.dumps(ret))
View.py Code
#############################
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .w{ 8 width: 1000px; 9 margin: 0 auto; 10 } 11 .item{ 12 width: 25%; 13 float: left; 14 } 15 .item img{ 16 width: 100%; 17 } 18 </style> 19 </head> 20 <body> 21 <div>姑娘们</div> 22 <div class="w" id="container"> 23 <div class="item">11</div> 24 <div class="item">22</div> 25 <div class="item">33</div> 26 <div class="item">44</div> 27 </div> 28 29 <script src="/static/js/jquery.js"></script> 30 <script> 31 $(function() { 32 var obj = new ScrollImg(); 33 obj.initImg(); 34 obj.scrollEvent(); 35 }); 36 function ScrollImg() { 37 this.NID = 0; 38 //赋值-1或展示列数减1,解决第一次展示时第一个位置对应第一张图片 39 this.lastPosition = -1; 40 this.initImg = function initImg() { 41 //**************this = obj************* 42 var that = this; 43 $.ajax({ 44 url: ‘/get_img.html‘, 45 type: ‘GET‘, 46 data: {nid:this.NID}, 47 dataType: ‘JSON‘, 48 success:function(arg) { 49 var img_list = arg.data; 50 $.each(img_list,function (index,v) { 51 //index为从零开始的序号,v为循环出来的对象 52 //console.log(index,v); 53 //加cont+1为了使下次下次展示的图片能接上 54 var eqv = (index+that.lastPosition+1) % 4; 55 console.log(eqv); 56 var tag = document.createElement(‘img‘); 57 tag.src = ‘/‘ + v.src; 58 //$(‘#container‘).children().eq(eqv)先找到container下children与eqv匹配的序号 59 //然后再append插入img标签,这里需要创建tag 60 $(‘#container‘).children().eq(eqv).append(tag); 61 //判断循环结束,并记录结束时ID和eqv 62 if(index+1 == img_list.length) { 63 //为什么不加var? 64 that.lastPosition = eqv; 65 //that.NID = v.id; 66 } 67 }); 68 } 69 }); 70 }; 71 this.scrollEvent = function scrollEvent() { 72 //this = obj 73 var that = this; 74 //当滚轮到达最底部时,执行initImg() 75 $(window).scroll(function() { 76 //什么时候到达最底部? 77 //文档高度 78 var docHeight = $(document).height(); 79 //窗口高度 80 var winHeight = $(window).height(); 81 //滚动条可滚动高度 82 var scrollTop = $(window).scrollTop(); 83 var scrollTop = Math.round(scrollTop); 84 //检查监听情况 85 //console.log(docHeight,winHeight,scrollTop); 86 if(winHeight+scrollTop == docHeight) { 87 //console.log(1); 88 that.initImg(); 89 } 90 }); 91 }; 92 } 93 </script> 94 95 </body> 96 </html>
HTML Code
注意:避免定义全局变量,需用对象进行封装
要点:
- 布局
- 文档、窗口、滚动
- 面向对象的封装:this,that
原文地址:https://www.cnblogs.com/Lujun1028/p/9646000.html
时间: 2024-08-01 17:11:07