Django瀑布流的实现示例
作者:风老魔 发布时间:2021-05-09 10:07:42
标签:Django,瀑布流
需求分析
现在是 "图片为王"的时代,在浏览一些网站时,经常会看到类似于这种满屏都是图片。图片大小不一,却按空间排列,就这是瀑布流布局。
以瀑布流形式布局,从数据库中取出图片
每次取出等量(7 条)的图片,加载到页面
当滑轮滚动到最底端时,自动再加载图片
实现流程
以包形式管理模型
将图片自动上传到静态文件 static
前端页面每行排列四张图片(四个 div )
当页面加载时,以 ajax 形式自动向后台发送请求,获取图片数据,再用 js 循环生成 img 标签添加到每个 div 中
JS 循环图片信息列表,将当前循环元素的索引与每行排列的图片数目(4张)求余数,再利用余数定位每个 div 标签
模型设计
在这里,我以包的形式管理模型 models
,编写 app/models/video/img_models.py
:
from django.db import models
class 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 Img
def 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) + 7
postion_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, include
urlpatterns = [
path('admin/', admin.site.urls),
path('app/', include('app.urls')),
]
# app/urls.py
from django.urls import path
from app import views
urlpatterns = [
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();
}
})
}
}
这是整个项目大致分布:
参考博客
小功能瀑布流的实现
django实现瀑布流、组合搜索、阶梯评论、验证码
来源:https://blog.csdn.net/hj1993/article/details/129698688
0
投稿
猜你喜欢
- jQuery是最近比较火的一个JavaScript库,从del.icio.us/上相关的收藏可见一斑。到目前为之jQuery已经发布到1.2
- 本文实例讲述了Python实现识别图片内容的方法。分享给大家供大家参考,具体如下:python识别图片内容。这里我的环境为windows64
- 之前我们已经安装了lnmp的环境,现在让我们来安装phpmyadmin。跟前一样,yum默认的库里是没有phpmyadmin的,我们需要从e
- 该域名查询系统写的很简单,只是实现了功能使用XmlHttp来获取远程查询结果,实际上就是小偷程序!相关推荐:域名注册情况查询/
- 背景借助django-admin,可以快速得到CRUD界面,但若需要创建多选标签字段时,需要对表单进行调整示例model.py一个tag(标
- jupyter notebook安装完成之后需要密码,还有某些情况下也会出现需要输入密码的情况解决方法如下:1、在运行界面输入 jupyte
- pandas 对于数据分析的人员来说都是必须熟悉的第三方库,pandas 在科学计算上有很大的优势,特别是对于数据分析人员来说,相当的重要。
- 这最近在PJ的function库里看到的这个函数,感觉思路差了点,不过相对比较完美,只是闭合标签时的顺序问题,呵呵 修改一下数组arrTag
- 本文以实例形式实现了python监控linux性能以及进程消耗性能的方法,具体实现代码如下:# -*- coding: utf-8 -*-&
- 📚引言泰坦尼克号的沉没是历史上最惨痛的沉船事件之一。1912年4月15日,泰坦尼克号在其处女航中与冰山相撞后沉没,2224名乘客和船员中的1
- 本文实例讲述了python任务调度实现方法。分享给大家供大家参考。具体如下:方法1:import sched, timeimport oss
- 上篇文章讲了js中的一些概念(词法结构) 和 数据类型(部分)。这章我们 继续.然后了解下js中操作数据 和 函数的 作用域。1,对象跟基本
- socket接口是实际上是操作系统提供的系统调用。socket的使用并不局限于Python语言,你可以用C或者Java来写出同样的socke
- 初学python,抓取搜狗微信公众号文章存入mysqlmysql表:代码:import requestsimport jsonimport
- 效果图from wxpyimport *import requestsfrom datetimeimport datetimeimport
- 今天有朋友问到如下一则案例,ORA-01114,ORA-27067以及OSD-04026错误同时出现:*** ACTION NAME:()
- 原始生成对抗网络Generative Adversarial Networks GAN包含生成器Generator和判别器Discrimin
- Microsoft® SQL Server™ 2000 由一系列产品组成,不仅能够满足最大的数据处理系统
- 本文实例讲述了python对象转字典的两种实现方式。分享给大家供大家参考,具体如下:一. 方便但不完美的__dict__对象转字典用到的方法
- canal简介由阿里巴巴开源 github地址:https://github.com/alibaba/canalCanal是阿里巴巴开源的一