当前位置： 首页 > news >正文

Django 实现瀑布流

news 2026/3/28 21:11:20

需求分析

现在是 "图片为王"的时代，在浏览一些网站时，经常会看到类似于这种满屏都是图片。图片大小不一，却按空间排列，就这是瀑布流布局。

  • 以瀑布流形式布局，从数据库中取出图片
  • 每次取出等量（7 条）的图片，加载到页面
  • 当滑轮滚动到最底端时，自动再加载图片

实现流程

  • 以包形式管理模型
  • 将图片自动上传到静态文件 static
  • 前端页面每行排列四张图片（四个 div ）
  • 当页面加载时，以 ajax 形式自动向后台发送请求，获取图片数据，再用 js 循环生成 img 标签添加到每个 div 中
  • JS 循环图片信息列表，将当前循环元素的索引与每行排列的图片数目（4张）求余数，再利用余数定位每个 div 标签

模型设计

在这里，我以包的形式管理模型 models，编写 app/models/video/img_models.py：

from django.db import modelsclass Img(models.Model):"""upload_to: 上传文件地址"""src = models.FileField(max_length=64, verbose_name='图片地址', upload_to='app/static/app/upload')title = models.CharField(max_length=64, verbose_name='标题')summary = models.CharField(max_length=128, verbose_name='简介')class Meta:verbose_name_plural = '图片'def __str__(self):return self.title

视图函数

编写 app/views.py：

from django.shortcuts import render
from django.http import JsonResponse
from app.models.video.img_models import Imgdef img(request):return render(request, 'app/img.html')def getImgs(request):nid = request.GET.get('nid')print(nid)# nid 第一次取为 0，每次取 7 条last_position_id = int(nid) + 7postion_id = str(last_position_id)# 获取 0 < id < 7 的数据img_list = Img.objects.filter(id__gt=nid, id__lt=postion_id).values('id', 'title', 'src')img_list = list(img_list)   # 将字典格式转换为列表形式ret = {'status': True,'data': img_list}return JsonResponse(ret)

在后台取出符合条件的数据，然后打包成 JSON 格式数据，前端模板再通过 jQuery 将其循环生成 img 标签，并添加到 div 标签中。

模板

编写 app/templates/app/img.html：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>瀑布流</title><style type="text/css">.box1{width: 1000px;margin: 0 auto;}.box1 .item{width: 25%;float: left;}.item img{width: 100%;}</style>
</head>
<body><h1>瀑布流</h1><div class="box1" id="container"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div><script src="{% static 'app/jquery/jquery-3.1.1.js' %}"></script><script>$(function () {initImg();scroll();});NID = 0;LASTPOSTION = 3;    // 循环最后那个的位置function initImg() {$.ajax({url: '/app/getImgs/',type: 'GET',data: {nid: NID},dataType: 'JSON',success: function (arg) {if (arg.status){var img_list = arg.data;$.each(img_list, function (index, value) {var n = (index + LASTPOSTION + 1) % 4;
{#                          console.log(n);    // 0、1 、2 、3    一直为 0、1 、2 、3#}var img = document.createElement('img');img.src = '/' + value.src;    //  app/static/app/upload/7.jpg// 也就是给第一、二、三、四给 div 添加 img 标签，eq(0) 为第一个$('#container').children().eq(n).append(img);if (index + 1 == img_list.length){console.log(n, value.id);LASTPOSTION = n;
{#                              NID = value.id;#}}});}}})}// 监听滑轮$(window).scroll(function () {// 文档高度var doc_height = $(document).height();// 窗口高度var window_height = $(window).height();// 滑轮高度var scroll_height = $(window).scrollTop();if (window_height + scroll_height == doc_height){initImg();}})</script>
</body>
</html>

settings 配置

TEMPLATES = [{'BACKEND': 'django.template.backends.django.DjangoTemplates',# templates 设置'DIRS': [os.path.join(BASE_DIR, 'templates')],'APP_DIRS': True,'OPTIONS': {'context_processors': ['django.template.context_processors.debug','django.template.context_processors.request','django.contrib.auth.context_processors.auth','django.contrib.messages.context_processors.messages',],},},
]LANGUAGE_CODE = 'zh-hans'TIME_ZONE = 'Asia/Shanghai'# 因为让模板能够找到 static 中图片，添加了 /app
STATIC_URL = '/app/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'app', 'static'),
)TEMPLATE_DIRS = (os.path.join(BASE_DIR, 'app', 'templates'),)

urlconf 配置

这是我的 app/urls.py：

# Project/urls.py
from django.contrib import admin
from django.urls import path, includeurlpatterns = [path('admin/', admin.site.urls),path('app/', include('app.urls')),
]# app/urls.py
from django.urls import path
from app import viewsurlpatterns = [path('img/', views.img, name='img'),path('getImgs/', views.getImgs, name='getImgs'),
]

包管理模型

整个项目的模型部分，以包的形式管理，有些功能部分单独设计模型文件，因此要在包文件中导入相应模型。

编写 app/models/video/__init__.py：

from app.models.video.img_models import Img

使用对象封装全局变量

在上面 JS 代码中，我们使用了全局变量，实际开发中应该尽量避免使用全局变量，在这里用对象将其封装。

// 全局变量封装
$(function () {var obj = new ScrollImg();   // 定义一个对象obj.fetchImg();         obj.scrollEvent();
});// 对象 ScrollImg
function ScrollImg() {// 将之前的全局变量封装在对象内部，仅其内部能使用this.NID = 0;       this.LASTPOSITION = 3;// 向后台发送 ajax 请求，获取图片信息this.fetchImg = function () {var that = this;$.ajax({url: '/app/getImgs/',type: 'GET',data: {nid: that.NID},dataType: 'JSON',success: function (arg) {var img_list = arg.data;$.each(img_list, function (index, value) {var n = (index + that.LASTPOSITION + 1) % 4;var img = document.createElement('img');img.src = '/' + value.src;$('#container').children().eq(n).append(img);if (index + 1 == img_list.length) {that.LASTPOSITION = n;// 每取完一次，便把最后那条的 id 赋值给 NID 传到后台，再根据这个条件取 7 条数据that.NID = value.id;}});}})};this.scrollEvent = function () {var that = this;// 监听滑轮，当滑轮高度+窗口高度==文档高度时，即表示滑轮已经滑动到最底部，再执行 fetchImg() 函数，再从数据库取出数据$(window).scroll(function () {var scroll_height = $(window).scrollTop();var window_height = $(window).height();var doc_height = $(document).height();if (scroll_height + window_height == doc_height ) {that.fetchImg();}})}
}

这是整个项目大致分布：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mYAM6WY5-1679406971121)(https://raw.githubusercontent.com/hj1933/img/master/iimg/%E7%80%91%E5%B8%83%E6%B5%81.gif)]

参考博客

  • 小功能瀑布流的实现

  • django实现瀑布流、组合搜索、阶梯评论、验证码

相关文章：

Django 实现瀑布流

需求分析 现在是 "图片为王"的时代&#xff0c;在浏览一些网站时&#xff0c;经常会看到类似于这种满屏都是图片。图片大小不一&#xff0c;却按空间排列&#xff0c;就这是瀑布流布局。 以瀑布流形式布局&#xff0c;从数据库中取出图片每次取出等量&#xff08;7 …...

编程日记 2023/3/25 10:14:58

传输层协议----UDP/TCP

文章目录前言一、再谈端口号端口号的划分认识知名端口号(Well-Know Port Number)两个问题nestatpidof二、UDP协议UDP协议端格式UDP的特点面向数据报UDP的缓冲区UDP使用注意事项基于UDP的应用层协议二、TCP协议TCP协议段格式可靠性问题确认应答(ACK)机制流量控制六个标志位PSHUG…...

编程日记 2023/4/12 4:52:09

教你如何快速在Linux中找到某个目录中最大的文件

工作中经常会有查看某个目录下最大的文件的需求&#xff0c;比如在运维工作中&#xff0c;发现某个系统或功能不工作了&#xff0c;经排查发现是服务器空间满了…那么接下来就需要清理一下临时文件或者日志文件&#xff0c;或者其他不需要的文件&#xff0c;那么就会想要查看一…...

编程日记 2023/4/19 19:51:03

Java二叉树面试题讲解

Java二叉树面试题讲解&#x1f697;1.检查两颗树是否相同&#x1f695;2.另一颗树的子树&#x1f699;3.二叉树最大深度&#x1f68c;4.判断一颗二叉树是否是平衡二叉树&#x1f68e;5.对称二叉树&#x1f693;6.获取树中结点个数&#x1f691;7.判断一个树是不是完全二叉树&am…...

编程日记 2023/3/25 9:59:50

rancher2.6进阶之nfs动态创建pv配置

添加NFS client provisioner 动态提供K8s后端存储卷 1.1.前提说明 1.1.1.说明 NFS client provisioner 利用 NFS Server 给 Kubernetes 作为持久存储的后端，并且动态提供PV。 默认 rancher 2 的存储类中的提供者不包含NFS，需要手动添加；添加方式有两种： 1）从应用商店直接安…...

编程日记 2023/4/19 19:51:44

快速上手vue elementUI好看的登录界面

这是一个非常非常适合新手的vue登录界面&#xff0c;总体来说美观大气&#xff0c;axios那部分没有发&#xff0c;有需要的大家可以自己进行二次开发&#xff0c;继续编写。 用到了技术栈有 vue/cli 5.07 element-ui 2.15.9 适合入门级新手&#xff0c;展示下页面 emmm验证码…...

编程日记 2023/3/25 9:49:44

Vue趣味【Vue3+Element Plus+Canvas实现一个简易画板；支持导出为图片】

目录&#x1f31f;前言&#x1f31f;粉丝先看&#x1f31f;创建Vue3项目&#x1f31f;引入Element Plus&#x1f31f;实现代码&#xff08;详细注释&#xff09;&#x1f31f;写在最后&#x1f31f;JSON包里写函数&#xff0c;关注博主不迷路&#x1f31f;前言 哈喽小伙伴们&a…...

编程日记 2023/5/18 16:42:52

【Spring Cloud Alibaba】2.服务注册与发现（Nacos安装）

文章目录环境要求简介安装Nacos源码安装Docker安装数据库配置访问服务我们要搭建一个Spring Cloud Alibaba项目就绕不开Nacos&#xff0c;阿里巴巴提供的Nacos组件&#xff0c;可以提供服务注册与发现和分布式配置服务&#xff0c;拥有着淘宝双十一十几年的流量经验&#xff0c…...

编程日记 2023/4/12 4:53:34

深度学习 Day28——利用Pytorch实现好莱坞明星识别

深度学习 Day28——利用Pytorch实现好莱坞明星识别 文章目录深度学习 Day28——利用Pytorch实现好莱坞明星识别一、前言二、我的环境三、前期工作1、导入依赖项设置GPU2、导入数据集3、划分数据集四、调用官方的VGG16模型五、训练模型1、编写训练函数2、编写测试函数3、设置动态…...

编程日记 2023/3/25 9:34:37

Android中使用FCM进行消息推送

Firebase Cloud Message 的介绍 Firebase Cloud Message（FCM）是由Google推出的一种云端消息推送服务，它是由Google推出的Google Cloud Messaging（GCM）服务的升级版。在2016年5月，Google宣布将Google Cloud Messaging重命名为Firebase Cloud Message，作为Firebase的一部…...

编程日记 2023/4/19 19:54:30

从 X 入门Pytorch——BN、LN、IN、GN 四种归一化层的代码使用和原理

Pytorch中四种归一化层的原理和代码使用前言1 Batch Normalization&#xff08;2015年提出&#xff09;Pytorch官网解释原理Pytorch代码示例2 Layer Normalization&#xff08;2016年提出&#xff09;Pytorch官网解释原理Pytorch代码示例3 Instance Normalization&#xff08;2…...

编程日记 2023/3/25 9:24:31

Windows环境下实施域名访问的一些小知识

文章目录 前言一、windows域名访问流程二、网络域名访问配置设置DNS未正确设置DNS的结果三、本地hosts设置本地hosts本地hosts的优先机制本地hosts的内部访问次序示例一示例二总结前言 作为一种常见的操作系统，windows系统具有其特殊的域名访问管理机制。了解其访问机制，将有…...

编程日记 2023/4/19 19:56:11

78.qt QCustomPlot介绍

参考https://www.qcustomplot.com/index.php/tutorials/settingup 下载地址: https://www.qcustomplot.com/index.php/download 1.添加帮助文档 在QtCreator ——>工具——>选项——>帮助——>文档——>添加，选择qcustomplot.qch文件，确定，以后按F1就能跳转到…...

编程日记 2023/4/12 4:54:54

win32api之文件系统管理(七)

什么是文件系统 文件系统是一种用于管理计算机存储设备上文件和目录的机制。文件系统为文件和目录分配磁盘空间&#xff0c;管理文件和目录的存储和检索&#xff0c;以及提供对它们的访问和共享&#xff0c;以下是常见的两种文件系统&#xff1a; NTFSFAT32磁盘分区容量2T32G…...

编程日记 2023/3/25 9:09:18

点云规则格网化，且保存原始的点云索引

点云规则格网化&#xff0c;且保存原始的点云索引 点云深度学习Voxelize规则&#xff0c;参考PTV2&#xff1a;https://github.com/Gofinge/PointTransformerV2 1总执行文件 import numpy as np import torch from pcr.utils.registry import Registry TRANSFORMS Registry…...

编程日记 2023/3/25 9:04:16

入职第一天就被迫离职，找工作多月已读不回，面试拿不到offer我该怎么办？

大多数情况下&#xff0c;测试员的个人技能成长速度&#xff0c;远远大于公司规模或业务的成长速度。所以&#xff0c;跳槽成为了这个行业里最常见的一个词汇。 前言 前几天&#xff0c;我们一个粉丝跟我说&#xff0c;正常入职一家外包&#xff0c;什么都准备好了&#xff0…...

编程日记 2023/3/25 8:59:15

走进Vue【三】vue-router详解

目录&#x1f31f;前言&#x1f31f;路由&#x1f31f;什么是前端路由&#xff1f;&#x1f31f;前端路由优点缺点&#x1f31f;vue-router&#x1f31f;安装&#x1f31f;路由初体验1.路由组件router-linkrouter-view2.步骤1. 定义路由组件2. 定义路由3. 创建 router 实例4. 挂…...

编程日记 2023/3/25 8:54:12

html+css制作

<!DOCTYPE html> <html><head><meta charset"utf-8"><title>校园官网</title><style type"text/css">*{padding: 0;margin: 0;}#logo{width:30%;float: left;}.nav{width: 100%;height: 100px;background-color…...

编程日记 2023/3/25 8:49:10

Python实现rar、zip和7z文件的压缩和解压

一、7z压缩文件的压缩和解压 1、安装py7zr 我们要先安装py7zr第三方库&#xff1a; pip install py7zr如果python环境有问题&#xff0c;执行上面那一条安装语句老是安装在默认的python环境的话&#xff0c;我们可以执行下面这条语句&#xff0c;将第三方库安装在项目的虚拟…...

编程日记 2023/4/11 7:57:15

从Hive源码解读大数据开发为什么可以脱离SQL、Java、Scala

从Hive源码解读大数据开发为什么可以脱离SQL、Java、Scala 前言 【本文适合有一定计算机基础/半年工作经验的读者食用。立个Flg&#xff0c;愿天下不再有肤浅的SQL Boy】 谈到大数据开发&#xff0c;占据绝大多数人口的就是SQL Boy&#xff0c;不接受反驳&#xff0c;毕竟大…...

编程日记 2023/3/25 8:39:05

【 MySQL 】第三节 - 约束实战全攻略

&#x1f31f;【深度剖析】MySQL 约束实战全攻略&#xff1a;从建表到外键行为管理&#xff08;附避坑指南&#xff09; 前言 在数据库设计中&#xff0c;约束&#xff08;Constraint&#xff09; 是保障数据一致性、完整性和业务逻辑性的“安全锁”。日前我系统学习了 MySQL…...

编程新知 2026/3/28 19:59:10

如何用G-Helper智能恢复ROG笔记本色彩显示：终极解决方案

如何用G-Helper智能恢复ROG笔记本色彩显示&#xff1a;终极解决方案 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops. Control tool for ROG Zephyrus G14, G15, G16, M16, Flow X13, Flow X16, TUF, Strix, Scar and other models 项目地…...

编程新知 2026/3/28 18:08:17

别再重复造轮子了！手把手教你用Vue3 + v3layer组件库，5分钟搞定PC端复杂弹窗需求

Vue3弹窗开发实战&#xff1a;从零封装到v3layer高效解决方案 在PC端Web应用开发中&#xff0c;弹窗组件几乎是每个项目都无法绕开的基础功能。从简单的提示框到复杂的交互式面板&#xff0c;弹窗承载着信息展示、用户反馈、表单提交等多样化需求。传统开发模式下&#xff0c;前…...

编程新知 2026/3/28 16:47:32

如何通过铜钟音乐重拾纯粹听歌的乐趣：一个零干扰的Web音乐解决方案

如何通过铜钟音乐重拾纯粹听歌的乐趣&#xff1a;一个零干扰的Web音乐解决方案 【免费下载链接】tonzhon-music 铜钟 (Tonzhon.com): 免费听歌; 没有直播, 社交, 广告, 干扰; 简洁纯粹, 资源丰富, 体验独特&#xff01;(密码重置功能已回归) 项目地址: https://gitcode.com/G…...

编程新知 2026/3/28 16:25:20

3个实用技巧：Qwen Code多语言支持让开发者效率提升40%

3个实用技巧&#xff1a;Qwen Code多语言支持让开发者效率提升40% 【免费下载链接】qwen-code Qwen Code is a coding agent that lives in the digital world. 项目地址: https://gitcode.com/GitHub_Trending/qw/qwen-code 在全球化协作日益频繁的开发环境中&#xff…...

编程新知 2026/3/28 16:13:08

M.2 (NGFF) PCIe 3.0 接口在嵌入式系统中的实战应用 —— 从硬件设计到驱动优化

1. M.2接口在嵌入式系统中的核心价值 第一次在嵌入式项目里用M.2接口时&#xff0c;我盯着那个比指甲盖大不了多少的插槽直犯嘀咕——这么小的玩意儿真能跑PCIe 3.0&#xff1f;实测后发现这简直是嵌入式系统的"万能扩展坞"。不同于消费级PC的M.2只用来插SSD&#x…...

编程新知 2026/3/28 15:43:03

【RS】ENVI5.6 栅格数据坐标转换实战：从加载到参数设置的完整指南

1. ENVI5.6坐标转换入门指南 第一次打开ENVI5.6时&#xff0c;面对密密麻麻的工具栏确实有点懵。记得去年处理一批无人机影像时&#xff0c;就遇到了坐标系不匹配的问题。当时折腾了半天才找到这个隐藏的坐标转换功能&#xff0c;今天就把完整的操作流程分享给大家。 ENVI5.6…...

编程新知 2026/3/28 14:42:44

从‘两遍法’到‘并查集’：图像连通域算法演进与性能避坑指南

从‘两遍法’到‘并查集’&#xff1a;图像连通域算法演进与性能避坑指南 在工业质检、自动驾驶或医学影像分析中&#xff0c;处理一张2000万像素的图像时&#xff0c;传统连通域算法可能让系统卡顿数秒——这恰恰是算法选型失误的典型代价。本文将带您穿透三种主流算法的技术…...

编程新知 2026/3/28 14:22:38

终极Python量化分析指南：5个技巧快速掌握通达信数据接口

终极Python量化分析指南&#xff1a;5个技巧快速掌握通达信数据接口 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx MOOTDX是一个基于Python的通达信数据接口实现&#xff0c;为量化分析开发者和股…...

编程新知 2026/3/28 10:39:01

告别80类限制！用YOLO-World+CLIP实现‘指哪打哪’的任意物体检测（保姆级教程）

突破类别限制&#xff1a;YOLO-World与CLIP联动的开放词汇检测实战 想象一下&#xff0c;当你需要检测一张照片中"左手边的马克杯"或"书架第三层的编程书籍"时&#xff0c;传统物体检测模型会告诉你&#xff1a;"抱歉&#xff0c;这不在我的80类识别范…...

编程新知 2026/3/28 10:14:43