jquery之瀑布流效果

下面这种布局的瀑布流的效果用jquery可以很好的实现

views

 1 from django.shortcuts import render, HttpResponse
 2 from django.http import JsonResponse
 3 from app01 import models
 4 import json
 5 
 6 def imgs(request):
 7     #img_list = models.Img.objects.all()
 8     return render(request, 'img.html')
 9 
10 def get_imgs(request):
11     nid = request.GET.get('nid')
12     img_list = models.Img.objects.filter(id__gt=nid).values('id', 'src', 'title')
13     img_list = list(img_list)
14     ret = {
15         'status': True,
16         'data': img_list,
17     }
18     # return HttpResponse(json.dumps(ret))
19     return JsonResponse(ret)
20     #JsonResponse返回的是一个字典，如果要返回列表，需要加参数safe=False
21     # return JsonResponse([11,22,33],safe=False)
views

urls

1 from django.conf.urls import url
2 from django.contrib import admin
3 from app01 import views
4 urlpatterns = [
5     url(r'^admin/', admin.site.urls),
6     url(r'^imgs.html$', views.imgs),
7     url(r'^get_imgs.html$', views.get_imgs),
8 ]
urls

models

 1 from django.db import models
 2 
 3 class Img(models.Model):
 4     src = models.FileField(max_length=32, verbose_name='图片路径', upload_to='static/upload')
 5     title = models.CharField(max_length=16, verbose_name='标题')
 6     summary = models.CharField(max_length=128, verbose_name='简介')
 7     #定制在admin后台显示的名称
 8     class Meta:
 9         verbose_name_plural = '图片'
10 
11     def __str__(self):
12         return self.title
models

html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .w{
 8             width: 1400px;
 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 
22     <div class="w" id="container">
23         <div class="item">11
24         </div>
25         <div class="item">22
26 
27         </div>
28         <div class="item">33
29 
30         </div>
31         <div class="item">44
32 
33         </div>
34 
35     </div>
36 
37 <script src="/static/jquery-3.1.1.js"></script>
38 <script>
39     $(function () {
40         var obj = new ScrollImag();
41         obj.initImg();
42         obj.scrollEvent();
43     });
44 
45     function ScrollImag(){
46         this.nid = 0;
47         this.lastPostion = 3;
48         this.initImg = function () {
49             //******************this=obj*****************
50             var that = this;
51             $.ajax({
52             url:'get_imgs.html',
53             type:'GET',
54             data:{'nid':that.nid},
55             dataType:'JSON',
56             success:function (arg) {
57                 var img_list = arg.data;
58                 //img_list是data列表
59                 //index是索引，从0开始，v是数据列表
60                 $.each(img_list,function (index,v) {
61                     var eqv = (index+that.lastPostion+1) % 4;
62                     var tag = document.createElement('img');
63                     tag.src = '/' + v.src;
64                     $('#container').children().eq(eqv).append(tag);
65                     //当循环到最后一个图片时候，将图片的ID赋值给NID
66                     //[{"title": "1", "id": 2, "src": "static/upload/1_O0BgeeO.jpg"}
67                     if (index+1 == img_list.length){
68                         that.nid = v.id;
69                         //NID注释掉可以实现当前图片一直下拉循环
70                         that.lastPostion = eqv;
71                     }
72                 })
73             }
74         })
75 
76         };
77         this.scrollEvent = function () {
78             //this=obj
79             var that = this;
80             $(window).scroll(function () {
81             //什么时候到达底部
82             //文档高度-理解为body的高度
83             var docHeight = $(document).height();
84             //窗口高度-window高度
85             var winHeight = $(window).height();
86             //滚动条可滑动的高度
87             var scrollTop = $(window).scrollTop();
88             if (winHeight+scrollTop==docHeight) {
89                 console.log(1);
90                 that.initImg();
91             }
92         })
93         }
94     }
95 </script>
96 </body>
97 </html>
View Code

下面访问下项目，轻松实现瀑布流效果

 

posted @ 2018-09-05 09:55  THE_Gogh  阅读(83)  评论(0)    收藏  举报