基于jQuery实现瀑布流页面

2019-11-19 16:51:31

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了jQuery实现瀑布流页面展示的具体代码，供大家参考，具体内容如下

views.py

from django.shortcuts import render,HttpResponsefrom app01 import modelsimport json# Create your views here.def index(req):  if req.method == 'POST':    dic = models.Upload.objects.filter(status=1).values('img1','name','info')    dic = list(dic)    dic = json.dumps(dic)    print(dic)    return HttpResponse(dic)  return render(req, 'index.html')

url.py

from django.conf.urls import urlfrom django.contrib import adminfrom app01 import viewsurlpatterns = [  url(r'^admin/', admin.site.urls),  url(r'^index/', views.index),]

index.html

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    .clearfix:after{      content: '.';      visibility: hidden;      height: 0;      clear: both;      display: block;    }    img{      width: 245px;      height: 200px;    }  </style></head><body>  <div id="container" style="margin: 0 auto;width: 980px;" class="clearfix">    <div style="width: 245px;float: left">    </div>    <div style="width: 245px;float: left">    </div>    <div style="width: 245px;float: left">    </div>    <div style="width: 245px;float: left">    </div>  </div>  <script src="/static/js/jquery-2.1.4.min.js"></script>  <script>    $(function () {      $.ajax({        url:'/index/',        type:'POST',        dataType:'json',        success:function (arg) {          $.each(arg, function (k, v) {            console.log(k,v);            k = k + 1;            var div = document.createElement('div');            div.className = 'c1';            var img = document.createElement('img');            img.src = "/" + v.img1;            var p = document.createElement('p');            p.innerText = v.info;            div.appendChild(img);            div.appendChild(p);            if (k % 4 == 1) {              $('#container').children(':eq(0)').append(div);            } else if (k % 4 == 2) {              $('#container').children(':eq(1)').append(div);            } else if (k % 4 == 3) {              $('#container').children(':eq(2)').append(div);            } else if (k % 4 == 0) {              $('#container').children(':eq(3)').append(div);            } else {            }          })         }      })    })  </script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：js模拟支付宝密码输入框

下一篇：详解angular用$sce服务来过滤HTML标签