您好,登錄后才能下訂單哦!
這篇文章主要介紹了如何使用jQuery實(shí)現(xiàn)瀑布流頁(yè)面,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
具體內(nèi)容如下
views.py
from django.shortcuts import render,HttpResponse from app01 import models import 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 url from django.contrib import admin from app01 import views urlpatterns = [ 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" class="clearfix"> <div > </div> <div > </div> <div > </div> <div > </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>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“如何使用jQuery實(shí)現(xiàn)瀑布流頁(yè)面”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。