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

Django 实现瀑布流

news 文章来源：https://blog.csdn.net/hj1993/article/details/129698688 2025/2/12 8:14:33

需求分析

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

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

RocketMQ 事务消息 原理及使用方法解析

&#x1f34a; Java学习&#xff1a;Java从入门到精通总结 &#x1f34a; 深入浅出RocketMQ设计思想&#xff1a;深入浅出RocketMQ设计思想 &#x1f34a; 绝对不一样的职场干货&#xff1a;大厂最佳实践经验指南 &#x1f4c6; 最近更新&#xff1a;2023年3月24日 &#x…...

编程日记 2023/3/25 8:34:04

为什么 ChatGPT 输出时经常会中断，需要输入“继续” 才可以继续输出？

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;蚂蚁集团高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《EffectiveJava》独家解析》专栏作者。 热门文章推荐…...

编程日记 2023/3/25 8:29:03

PyTorch 之 基于经典网络架构训练图像分类模型

文章目录一、 模块简单介绍1. 数据预处理部分2. 网络模块设置3. 网络模型保存与测试二、数据读取与预处理操作1. 制作数据源2. 读取标签对应的实际名字3. 展示数据三、模型构建与实现1. 加载 models 中提供的模型&#xff0c;并且直接用训练的好权重当做初始化参数2. 参考 pyto…...

编程日记 2023/4/19 19:58:42

Scrapy的callback进入不了回调方法

一、前言 有的时候&#xff0c;Scrapy的callback方法直接被略过了&#xff0c;不去执行其中的回调方法&#xff0c;可能排查好久都排查不出来&#xff0c;我来教大家集中解决方法。 yield Request(urlurl, callbackself.parse_detail, cb_kwargs{item: item})二、解决方法 1…...

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

第二十一天 数据库开发-MySQL

目录 数据库开发-MySQL 前言 1. MySQL概述 1.1 安装 1.2 数据模型 1.3 SQL介绍 1.4 项目开发流程 2. 数据库设计-DDL 2.1 数据库操作 2.2 图形化工具 2.3 表操作 3. 数据库操作-DML 3.1 增加(insert) 3.2 修改(update) 3.3 删除(delete) 数据库开发-MySQL 前言 …...

编程日记 2023/4/11 7:58:03

蓝桥杯每日一真题—— [蓝桥杯 2021 省 AB2] 完全平方数（数论，质因数分解）

文章目录[蓝桥杯 2021 省 AB2] 完全平方数题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1样例 #2样例输入 #2样例输出 #2提示思路&#xff1a;理论补充&#xff1a;完全平方数的一个性质&#xff1a;完全平方数的质因子的指数一定为偶数最终思路&#xff1a;小插曲&am…...

编程日记 2023/4/19 20:01:53

Linux编辑器-vim

一、vim简述1&#xff09;vi/vim2&#xff09;检查vim是否安装2)如何用vim打开文件3)vim的几种模式命令模式插入模式末行模式可视化模式二、vim的基本操作1)进入vim&#xff08;命令行模式&#xff09;2)[命令行模式]切换至[插入模式]3)[插入模式]切换至[命令行模式]4)[命令行模…...

编程日记 2023/3/25 8:03:50

5G将在五方面彻底改变制造业

想象一下这样一个未来&#xff0c;智能机器人通过在工厂车间重新配置自己&#xff0c;从多条生产线上组装产品。安全无人机处理着从监视入侵者到确认员工停车等繁琐的任务。自动驾驶汽车不仅可以在建筑物之间运输零部件&#xff0c;还可以在全国各地运输。工厂检查可以在千里之…...

编程日记 2023/4/12 4:57:41

http和https的区别？

http和https的区别&#xff1f;HTTPHTTPSHTTP与HTTPS区别HTTPS相比于HTTP协议的优点和缺点HTTP http是超文本传输协议 HTTP协议是基于传输层的TCP协议进行通信&#xff0c;通用无状态的协议。80端口 HTTPS https—安全的超文本传输协议 是以安全为目标的HTTP通道&#xff0c;…...

编程日记 2023/3/25 7:53:46

【Spring Cloud Alibaba】4.创建服务消费者

文章目录简介开始搭建创建项目修改POM文件添加启动类添加配置项添加Controller添加配置文件启动项目测试访问Nacos访问接口查看端点检查简介 接下来我们创建一个服务消费者&#xff0c;本操作先要完成之前的步骤&#xff0c;详情请参照【Spring Cloud Alibaba】Spring Cloud A…...

编程日记 2023/4/12 15:47:48

软件下载网站怎么做/市场营销在线课程

Android不允许在子线程中进行UI的操作&#xff0c;但是有些时候我们确实需要在子线程中执行一些耗时的任务来更新UI&#xff0c;这时候就需要用到解析异步消息处理机制来完成操作。 异步消息处理包括&#xff1a; MessageHandlerMessageQueueLooper 该文章主要介绍Message和Ha…...

编程日记 2025/2/12 8:02:12

推荐黄的网站/搜索关键词排名优化软件

实验目的: l掌握BGP联邦工作原理 实验说明&#xff1a; l通过此实验练习&#xff0c;可以灵活的使用BGP联邦 实验环境&#xff1a; l五台支持SPSERVICES的IOS的路由器 l直通线 实验拓扑&#xff1a; 实验步骤&#xff1a; R4(config)#interface f0/0 R4(config-if)#i…...

编程日记 2025/2/12 5:56:08

贵阳做网站的大公司有哪些/引流黑科技app

ls /etc/sysconfig/network-scripts/ifcfg-* 列出所有的设备配置文件 vim /etc/sysconfig/network-scripts/ifcfg-ens33 打开配置文件进行编辑&#xff0c;BOOTPROTO默认情况是dhcp动态获取的&#xff0c;改成static静态&#xff0c;再添加网关信息 BROADCAST192.168.1.255IPAD…...

编程日记 2025/2/12 4:29:20

网站搭建代理/网站模板下载

推荐阅读&#xff1a; 这套Github上40Kstar学习笔记&#xff0c;可以帮你搞定95%以上的Java面试 毫不夸张的说&#xff0c;这份SpringBoot学习指南能解决你遇到的98%的问题 最全面试题新鲜出炉&#xff1a;70算法题、近30种大厂面试笔试常考知识点 前言 最近在做的业务场景…...

编程日记 2025/2/12 3:53:47

wordpress 多媒体管理系统/sem优化师是什么意思

FireEye Labs的安全研究人员发现了一个源自中国的Android恶意程序家族&#xff0c; 它正迅速传播到全世界20多个国家&#xff0c;它的指令控制服务器&#xff08;CC&#xff09;域名是aps.kemoge.net&#xff0c;因此被取名为Kemoge。Kemoge将合法应用 重新打包&#xff0c;伪装…...

编程日记 2025/2/12 1:59:42

网络营销如何进行网站推广/关键词爱站网

1、对Tags进行管理 设置一个全局的类&#xff0c;类似如下&#xff1a; public class Tags:MonoBehaviour{public const string player"Player"; } 调用Tags.player 2、发送消息 unity中每一个对象都有SendMessage&#xff0c;BroadcastMessage&#xff0c;SendMessa…...

编程日记 2025/2/11 22:45:49