How to use jQuery code to realize waterfall flow page

This article focuses on "how to use jQuery code to achieve waterfall flow page", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to use jQuery code to implement waterfall flow pages".

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

Title .clearfix: after {content:'.'; visibility: hidden; height: 0; clear: both; display: block;} img {width: 245px; height: 200px } $(function () {$.ajax ({url:'/index/', type:'POST', dataType:'json', success:function (arg) {$.each (arg, function (kpene v) {console.log (kpene 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 {}})}) at this point, I believe you have a better understanding of "how to use jQuery code to implement a waterfall flow page", so you might as well do it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!