西遊之路——python全棧——瀑布流
阿新 • • 發佈：2018-09-14
oca url ret sel lang spa json 找到 create 
###############################
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
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
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
西遊之路——python全棧——瀑布流