首页 > 代码库 > JQuery实现瀑布流页面

JQuery实现瀑布流页面

2024-09-14 03:35:31   218人阅读

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 url2 from django.contrib import admin3 from app01 import views4 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>

 

JQuery实现瀑布流页面


联系
我们