JQuery实现瀑布流页面

views.py

 1 from django.shortcuts import render,HttpResponse
 2 from app01 import models
 3 import json
 4 # Create your views here.
 5 def index(req):
 6     if req.method == 'POST':
 7         dic = models.Upload.objects.filter(status=1).values('img1','name','info')
 8         dic = list(dic)
 9         dic = json.dumps(dic)
10         print(dic)
11         return HttpResponse(dic)
12     return render(req, 'index.html')

url.py

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'^index/', views.index),
7 ]

index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .clearfix:after{
 8             content: '.';
 9             visibility: hidden;
10             height: 0;
11             clear: both;
12             display: block;
13         }
14         img{
15             width: 245px;
16             height: 200px;
17         }
18     </style>
19 </head>
20 <body>
21     <div id="container" style="margin: 0 auto;width: 980px;" class="clearfix">
22 
23         <div style="width: 245px;float: left">
24 
25         </div>
26 
27         <div style="width: 245px;float: left">
28 
29         </div>
30 
31         <div style="width: 245px;float: left">
32 
33 
34         </div>
35 
36         <div style="width: 245px;float: left">
37 
38 
39         </div>
40     </div>
41     <script src="/static/js/jquery-2.1.4.min.js"></script>
42     <script>
43         $(function () {
44             $.ajax({
45                 url:'/index/',
46                 type:'POST',
47                 dataType:'json',
48                 success:function (arg) {
49                     $.each(arg, function (k, v) {
50                         console.log(k,v);
51                         k = k + 1;
52                         var div = document.createElement('div');
53                         div.className = 'c1';
54                         var img = document.createElement('img');
55                         img.src = "/" + v.img1;
56                         var p = document.createElement('p');
57                         p.innerText = v.info;
58                         div.appendChild(img);
59                         div.appendChild(p);
60                         if (k % 4 == 1) {
61                             $('#container').children(':eq(0)').append(div);
62                         } else if (k % 4 == 2) {
63                             $('#container').children(':eq(1)').append(div);
64                         } else if (k % 4 == 3) {
65                             $('#container').children(':eq(2)').append(div);
66                         } else if (k % 4 == 0) {
67                             $('#container').children(':eq(3)').append(div);
68                         } else {
69 
70                         }
71                     })
72                  }
73             })
74         })
75 
76 
77     </script>
78 </body>
79 </html>

 

posted @ 2017-04-11 15:43  失落的黎明  阅读(235)  评论(0)  编辑  收藏  举报