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

南阳网站建设的公司,网站注册域名与制作,哪个网站的课件做的好,注册建筑工程公司起名大全需求分析 现在是 图片为王的时代#xff0c;在浏览一些网站时#xff0c;经常会看到类似于这种满屏都是图片。图片大小不一#xff0c;却按空间排列#xff0c;就这是瀑布流布局。 以瀑布流形式布局#xff0c;从数据库中取出图片每次取出等量#xff08;7 …需求分析 现在是 图片为王的时代在浏览一些网站时经常会看到类似于这种满屏都是图片。图片大小不一却按空间排列就这是瀑布流布局。 以瀑布流形式布局从数据库中取出图片每次取出等量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_length64, verbose_name图片地址, upload_toapp/static/app/upload)title models.CharField(max_length64, verbose_name标题)summary models.CharField(max_length128, 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(idgtnid, idltpostion_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 langen headmeta charsetUTF-8title瀑布流/titlestyle typetext/css.box1{width: 1000px;margin: 0 auto;}.box1 .item{width: 25%;float: left;}.item img{width: 100%;}/style /head bodyh1瀑布流/h1div classbox1 idcontainerdiv classitem/divdiv classitem/divdiv classitem/divdiv classitem/div/divscript src{% static app/jquery/jquery-3.1.1.js %}/scriptscript\((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 /htmlsettings 配置 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-hansTIME_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, nameimg),path(getImgs/, views.getImgs, namegetImgs), ]包管理模型 整个项目的模型部分以包的形式管理有些功能部分单独设计模型文件因此要在包文件中导入相应模型。 编写 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实现瀑布流、组合搜索、阶梯评论、验证码