第二种瀑布流是基于ajax方式工作的。与之前一种形式相比，这种方式可以向后台发送数据，
同时，ajax可以根据数据，每次只取一部分的数据，等滚轮划到底部时，再出发ajax，然后又去一次
models文件
class Img(models.Model): src = models.FileField(max_length=32,verbose_name='图片路径',upload_to='static/upload') title = models.CharField(max_length=16,verbose_name='标题') summary = models.CharField(max_length=128,verbose_name='简介') class Meta: verbose_name_plural = '图片表' def __str__(self): return self.title
url文件
from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ path('admin/', admin.site.urls), path('img.html/', views.img), path('get_img.html/', views.get_img), ]
views文件
from django.shortcuts import render,HttpResponse from django.http import JsonResponse from app01 import models def img(request): return render(request,'img.html') def get_img(request): import json nid = request.GET.get('nid') img_list = models.Img.objects.filter(id_gt = nid).values('id','src','title') #获取数据库的中数据 img_list = list(img_list) ret = {'status':True,'data':img_list} # return HttpResponse(json.dumps(ret)) return JsonResponse(ret)
html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .w{ width: 1000px; margin: 0 auto; } .item{ width: 25%; float: left; } .item img{ width: 100%; } </style> </head> <body> <div>风景图片</div> <div class="w"> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> </div> <script src="/static/jquery-3.3.1.js"></script> <script> $(function () { initImg() }) NID=0 {# 设置NID为全局变量，第一次ajax发送时是0.这时ajax只会从数据库取一部分数据，等滚轮划到底部，再出发ajax,再继续取值#} function initImg() { $.ajax({ url:'/get_img.html', type:'GET', data:{'nid':NID}, dataType:'JSON', success:function (arg) { var img_list = arg.data $.each(img_list,function (index,v) { var eqv = index % 4; {# index是循环的索引，v是去到的值（字典形式的）#} var tag = document.createElement('img') {#创建一个img标签，标签的地址是'/'+v.src，然后将标签添加到对应的子标签#} tag.src='/'+v.src $('.w').children().eq(eqv).append(tag) }) } }) } {# 下面可以监听鼠标滚轮动作，当滚轮到最底部时，继续出发get_img函数，然后到数据库中再取一次 #} </script> </body> </html>