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

Django 实现瀑布流

news 2025/11/12 17:33:39

需求分析

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

  • 以瀑布流形式布局，从数据库中取出图片
  • 每次取出等量（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

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2025/8/4 18:55:37

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/9/25 14:10:40

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2025/11/12 5:18:57

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2025/11/9 23:52:17

springboot 日志类切面，接口成功记录日志，失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

编程新知 2025/11/9 11:41:06

离线语音识别方案分析

随着人工智能技术的不断发展&#xff0c;语音识别技术也得到了广泛的应用&#xff0c;从智能家居到车载系统&#xff0c;语音识别正在改变我们与设备的交互方式。尤其是离线语音识别&#xff0c;由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力&#xff0c;广…...

编程新知 2025/9/22 13:00:25

小木的算法日记-多叉树的递归/层序遍历

&#x1f332; 从二叉树到森林&#xff1a;一文彻底搞懂多叉树遍历的艺术 &#x1f680; 引言 你好&#xff0c;未来的算法大神&#xff01; 在数据结构的世界里&#xff0c;“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的&#xff0c;它…...

编程新知 2025/7/6 4:23:14

云原生周刊：k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi&#xff08;原名 k8s‑vGPU‑scheduler&#xff09;是一款 CNCF Sandbox 级别的开源 K8s 中间件&#xff0c;通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度&#xff0c;为容器提供统一接口&#xff0c;实现细粒度资源配额…...

编程新知 2025/8/4 12:28:02

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...

编程新知 2025/10/28 1:59:30