JavaScript实现图片流

前端内容：

使用JavaScript和四个div，将照片放入四个div中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .container {
 8             width: 1000px;
 9             margin: 0 auto;
10             background-color: lightgray;
11         }
12 
13         .item {
14             width: 24%;
15             margin-right: 10px;
16             float: left;
17         }
18         .item img{
19             width: 100%;
20         }
21 
22     </style>
23 </head>
24 <body>
25 {#将内容放在container中#}
26 <div class="container">
27 {#    将图片内容放入四个item中，形成四个item#}
28     <div class="item"></div>
29     <div class="item"></div>
30     <div class="item"></div>
31     <div class="item"></div>
32 
33 </div>
34 <script src="/static/js/jquery-2.1.4.min.js"></script>
35 <script>
36     $(function () {
37 {#        网页加载时自动执行#}
38         var obj = new ScrollImg();
39         obj.fetchImg();
40         obj.scrollEvent();
41     })
42 
43 {#    定义对象#}
44     function ScrollImg() {
45         this.nid = 0;
46 {#        取照片方法#}
47         this.fetchImg = function () {
48             var that = this
49             $.ajax({
50                 url: '/get_imgs.html',
51                 type: 'GET',
52 {#        传输数据，已经取了多少照片，后台可以依据，继续取照片#}
53                 data: {'nid': that.nid},
54                 dataType: 'JSON',
55                 success: function (args) {
56                     if (args.status) {
57                         var img_list = args.data;
58                         $.each(img_list, function (index, obj) {
59                             var eqv = that.nid % 4;
60                             var tag = document.createElement('img')
61                             tag.src = '/' + obj.img_dir;
62                             console.log(eqv)
63                             $('.container').children().eq(eqv).append(tag)
64                             that.nid += 1;
65                         })
66                     }
67                 }
68             })
69         }
70 {#        监听滚动条，当滚到底部时，自动加载数据#}
71         this.scrollEvent = function () {
72             var that = this;
73             $(window).scroll(function () {
74                 var srollTop = $(window).scrollTop();
75                 var winHeight = $(window).height();
76                 var docHeight = $(document).height();
77                 if (srollTop + winHeight >= docHeight - 2) {
78                     that.fetchImg();
79                 }
80             })
81         }
82     }
83 </script>
84 </body>
85 </html>
前端数据

 

后台内容：

基于Django的FBV，函数视图，进行数据的读取和处理ajax请求

 1 def get_imgs(request):
 2     # 获取已经取得的照片数目
 3     index = request.GET.get('nid')
 4     #获取QuerySet集合对象，取从index后的10调数据
 5     imgs_list = models.Student.objects.values('id','img_dir','name')[index:index+10]
 6     imgs_list = list(imgs_list)
 7     # 传送状态和数据内容
 8     ret = {
 9         'status':True,
10         'data':imgs_list
11     }
12     return JsonResponse(ret)
后台代码

 

posted @ 2017-03-29 08:58  skiler  阅读(1415)  评论(0)    收藏  举报