###############################
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
##############################
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))
#############################
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>
注意：避免定义全局变量，需用对象进行封装
要点：
- 布局
- 文档、窗口、滚动
- 面向对象的封装：this，that