Django 实现瀑布流

风老魔 2023-04-08 原文

需求分析

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

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

这是整个项目大致分布：

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

参考博客

瀑布 Django

有关Django 实现瀑布流的更多相关文章

ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2
我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden
华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2
华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o
基于C#实现简易绘图工具【100010177】 - 2
C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.
MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2
MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO
【Java入门】使用Java实现文件夹的遍历 - 2
遍历文件夹我们通常是使用递归进行操作，这种方式比较简单，也比较容易理解。本文为大家介绍另一种不使用递归的方式，由于没有使用递归，只用到了循环和集合，所以效率更高一些！一、使用递归遍历文件夹整体思路1、使用File封装初始目录，2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组，取出每个File对象4-1、如果File是否是一个文件，打印4-2、否则就是一个目录，递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg
ruby - Arrays Sets 和 SortedSets 在 Ruby 中是如何实现的 - 2
通常，数组被实现为内存块，集合被实现为HashMap，有序集合被实现为跳跃列表。在Ruby中也是如此吗？我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况最佳答案数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为，并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而，大多数Rubyist对数组的性能特征有一些期望，这会迫使不符合它们的实现变得默默无闻，因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复
ruby - "public/protected/private"方法是如何实现的，我该如何模拟它？ - 2
在ruby中，你可以这样做:classThingpublicdeff1puts"f1"endprivatedeff2puts"f2"endpublicdeff3puts"f3"endprivatedeff4puts"f4"endend现在f1和f3是公共(public)的，f2和f4是私有(private)的。内部发生了什么，允许您调用一个类方法，然后更改方法定义？我怎样才能实现相同的功能(表面上是创建我自己的java之类的注释)例如...classThingfundeff1puts"hey"endnotfundeff2puts"hey"endendfun和notfun将更改以下函数定
ruby - 实现k最近邻需要哪些数据？ - 2
我目前有一个reddit克隆类型的网站。我正在尝试根据我的用户之前喜欢的帖子推荐帖子。看起来K最近邻或k均值是执行此操作的最佳方法。我似乎无法理解如何实际实现它。我看过一些数学公式(例如k表示维基百科页面)，但它们对我来说并没有真正意义。有人可以推荐一些伪代码，或者可以查看的地方，以便我更好地了解如何执行此操作吗？最佳答案 K最近邻(又名KNN)是一种分类算法。基本上，您采用包含N个项目的训练组并对它们进行分类。如何对它们进行分类完全取决于您的数据，以及您认为该数据的重要分类特征是什么。在您的示例中，这可能是帖子类别、谁发布了该项
ruby-on-rails - 使用 Ruby 正确处理 Stripe 错误和异常以实现一次性收费 - 2
我查看了Stripedocumentationonerrors，但我仍然无法正确处理/重定向这些错误。基本上无论发生什么，我都希望他们返回到edit操作(通过edit_profile_path)并向他们显示一条消息(无论成功与否)。我在edit操作上有一个表单，它可以POST到update操作。使用有效的信用卡可以正常工作(费用在Stripe仪表板中)。我正在使用Stripe.js。classExtrasController5000,#amountincents:currency=>"usd",:card=>token,:description=>current_user.email)
ruby - Ruby 1.8 的 Shellwords.shellescape 实现 - 2
虽然1.8.7的构建我似乎有一个向后移植的Shellwords::shellescape版本，但我知道该方法是1.9的一个特性，在1.8的早期版本中绝对不支持.有谁知道我在哪里可以找到(以Gem形式或仅作为片段)针对Ruby转义的Bourne-shell命令的强大独立实现？最佳答案您也可以从shellwords.rb中复制您想要的内容。在Ruby的颠覆存储库的主干中(即GPLv2'd):defshellescape(str)#Anemptyargumentwillbeskipped,soreturnemptyquotes.ret