django模板中使用JQ代碼實現瀑布流顯示效果
阿新 • • 發佈：2019-03-02
left eqv str 前端 set each req pos fun
settings中的配置不再詳細說明
一.路由代碼
from django.contrib import admin from django.conf.urls import url from app import views urlpatterns=[ url(r‘^admin‘,admin.site.urls), # 頁面顯示get請求 url(r‘^imgs.html$‘,views.imgs), # 獲取圖片的ajax請求 url(r‘^get_imgs.html$‘,views.get_imgs), ]
二.視圖函數
from app import models from django.http import JsonResponse from django.shortcuts import render def imgs(request): return render(request, ‘img.html‘) def get_imgs(request): nid = request.GET.get(‘nid‘) # id__gt=nid表示查詢id大於多少的數據,nid由模板的ajax傳過來 img_list = models.Img.objects.filter(id__gt=nid).values(‘id‘, ‘src‘, ‘title‘) # queryset對象轉列表 img_list = list(img_list) ret = { ‘status‘: True, ‘data‘: img_list } return JsonResponse(ret)
三.models代碼
from django.db import models # Create your models here. 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
四.模板代碼
<!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" id="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <script src="/static/JS/jquery-3.3.1.min.js"></script> <script> $(function () { var obj = new ScrollImg(); obj.fetchImg(); obj.scrollEvent(); }); function ScrollImg() { this.NID = 0; this.LASTPOSITION = 3; this.fetchImg = function () { var that = this; $.ajax({ url: ‘/get_imgs.html‘, type: ‘GET‘, //前端傳到後臺的獲取數據量 data: {nid: that.NID}, dataType: ‘JSON‘, success: function (arg) { var img_list = arg.data; //循環列表獲取index:索引,v:圖片信息(id,src,title) $.each(img_list, function (index, v) { //取4的余數,始終返回的是0,1,2,3的索引 var eqv = (index + that.LASTPOSITION + 1) % 4; console.log(eqv); //創建img標簽 var tag = document.createElement(‘img‘); //img標簽的src地址等於圖片的src地址 tag.src = ‘/‘ + v.src; $(‘#container‘).children().eq(eqv).append(tag); //如果index是最後一個, if (index + 1 == img_list.length) { //測試使用,始終只取開始那幾條數據 that.LASTPOSITION = eqv; //取完該頁面顯示的條數後,再去後面的條數 //that.NID = v.id; } }) } }) }; this.scrollEvent = function () { var that = this; //綁定滾輪事件 $(window).scroll(function () { //滾動條可滑動的高度 var scrollTop = $(window).scrollTop(); //窗口高度 var winHeight = $(window).height(); //文檔高度 var docHeight = $(document).height(); //如果滑到最後,執行獲取圖片 if (scrollTop + winHeight == docHeight) { that.fetchImg(); } }) } } </script> </body> </html>
django模板中使用JQ代碼實現瀑布流顯示效果