當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

django模板中使用JQ代码实现瀑布流显示效果

發布時間：2025/5/22 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 django模板中使用JQ代码实现瀑布流显示效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

settings中的配置不再詳細說明

一.路由代碼

from django.contrib import admin from django.conf.urls import url from app import viewsurlpatterns=[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 renderdef 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>

轉載于:https://www.cnblogs.com/angelyan/p/10462872.html

總結

以上是生活随笔為你收集整理的django模板中使用JQ代码实现瀑布流显示效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。