西游之路——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

 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)  # 
 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>Titletitle>
 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">11div>
24             div class="item">22div>
25             div class="item">33div>
26             div class="item">44div>
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>