西游之路——python全栈—

西游之路——python全栈——瀑布流

###############################

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