Django-瀑布流
1.通过ajax方式实现滚动条瀑布流
(1)创建数据库:xixi\pubu\models.py
from django.db import models
#Img图片表
class Img(models.Model): src = models.FileField(max_length=32,verbose_name='图片路径',upload_to='static/upload') #FileField上传文件，upload_to指定上传路径
title = models.CharField(max_length=16,verbose_name='标题')
summary = models.CharField(max_length=128,verbose_name='简介') class Meta:
verbose_name_plural = '图片'
def __str__(self):
return self.title
数据库：
+----------------------------+
| Tables_in_xi |
+----------------------------+
| auth_group |
| auth_group_permissions |
| auth_permission |
| auth_user |
| auth_user_groups |
| auth_user_user_permissions |
| django_admin_log |
| django_content_type |
| django_migrations |
| django_session |
| pubu_img |
+----------------------------+
图片表：pubu_img
+----+---------------------------------+--------------+-----------------+
| id | src | title | summary |
+----+---------------------------------+--------------+-----------------+
| 1 | static/upload/1_1610.JPG | 西瓜 | 夏天必备 |
| 2 | static/upload/1_336_o8hpAYb.JPG | 梨 | 润嗓子 |
| 3 | static/upload/1_438.JPG | 白雪 | 一只喵 |
| 4 | static/upload/1_1164.JPG | 饺子 | 好吃 |
| 5 | static/upload/1_193_t8jcwXm.JPG | 皮卡丘 | 宠物小精灵 |
| 6 | static/upload/1_1202.JPG | 不二 | 一本书 |
| 7 | static/upload/1_350.JPG | 油焖大虾 | 一道菜 |
+----+---------------------------------+--------------+-----------------+
(2)URL：E:\python\xixi\xixi\urls.py
from django.conf.urls import url
from django.contrib import admin
from pubu import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^imgs.html$', views.imgs), #照片页面显示
url(r'^get_imgs.html$', views.get_imgs), #获取照片
]
(3)视图函数：xixi\zuhe\views.py
from django.shortcuts import render
from pubu import models
from django.http import JsonResponse #JsonResponse内部会执行Json.dumps
def imgs(request): #照片页面显示函数
return render(request,'img.html') def get_imgs(request): #获取照片函数
nid = request.GET.get('nid') #获取到nid
img_list = models.Img.objects.filter(id__gt=nid).values('id','src','title') #按照上次取到的nid开始往下取，给用户返回json数据包括(id,src,title)
img_list = list(img_list) #
ret = {
'status': True,
'data': img_list
}
return JsonResponse(ret) #返回到前端
(4)页面：xixi\templates\img.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.w{
width: 1000px;
margin: 0 auto;
}
.item{
width: 25%; {#每一个照片宽度占百分之25#}
float: left;
}
.item img{
width: 100%;
}
</style>
</head>
<body>
<div class="w" id="container"> {#设置4个div，每一个div占一列，一排占4张照片#} <div class="item"> {#循环的第一张#} {#循环的第五张#}
</div> <div class="item"> {#循环的第二张#} {#循环的第六张#}
</div> <div class="item"> {#循环的第三张#} {#循环的第七张#}
</div> <div class="item"> {#循环的第四张#} {#循环的第八张#}
</div> </div>
<script src="/static/jquery-1.12.4.js"></script>
<script>
$(function () {
var obj = new ScrollImg(); //通过new调用ScrollImg类里的function()函数，this=obj(NID和LASTPOSITION)
obj.fetchImg(); //调用fetchImg()函数，这个函数里的this=obj(NID和LASTPOSITION)
obj.scrollEvent(); //调用滚轮scrollEvent()函数
}); function ScrollImg() { //第一步：当初次加载时候执行ScrollImg()
this.NID = 0; //NID记录每次读到照片的数量显示出来：默认是0
this.LASTPOSITION = 3; //每次循环最后的位置：默认是3
this.fetchImg = function () { //调用fetchIm
var that = this; //将当前的this对象复制一份到that变量中
$.ajax({ //通过ajax把照片获取到
url: '/get_imgs.html',
type: 'GET',
data:{nid:that.NID}, //把NID传到后端
dataType: 'JSON',
success:function (arg) { //arg是整个后端传来的内容
var img_list = arg.data; //arg.data是列表,,赋值给img_list=[{"src":"static/upload/1_336_o8hpAYb.JPG","title":"梨","id":2},{},{}]
$.each(img_list,function (index,v) { //对img_list循环的里面每一个元素是一个一个的字典 img_list(index是索引0,v是img_list=[{"src":"static/upload/1_336_o8hpAYb.JPG","title":"梨","id":2},{},{}])
var eqv = (index + that.LASTPOSITION + 1) % 4; //求余(index(1)+that.LASTPOSITION(3)+1)/4余0的顺序赋值给eqv
//console.log(eqv);
var tag = document.createElement('img'); //生成img标签赋值给tag：<img src="">
tag.src = '/'+ v.src; //生成整体tag标签，v.src是图片路径：<img src="static/upload/1_336_o8hpAYb.JPG">
$('#container').children().eq(eqv).append(tag); //找container下面的孩子4个div通过eqv 0 1 2 3的顺序把创建的tag标签放进去
//当循环最后一张图片时，将图片的ID赋值给NID
if (index + 1 == img_list.length) { //索引加一等于长度的时候
that.LASTPOSITION = eqv; //记录每次循环最后一次位置
that.NID = v.id; //v.id是2
}
})
}
})
};
this.scrollEvent = function () { //调用scrollEvent
//当滚轮达到最底部时，从新执行initImg函数()
var that = this; //将当前的this对象复制一份到that变量中
$(window).scroll(function () { //绑定事件
//什么时候达到最底部？
//文档高度(body占多高)
//窗口高度(内容站多高)
//窗口高度和文档高度差的是滚动条可滑动的高度
//窗口高度+滚轮滑动的高度=文档高度就是到达最底部了
var scrollTop = $(window).scrollTop(); //滑轮滚动的高度
var winHeight = $(window).height(); //获取窗口高度
var docHeight = $(document).height(); //获取文档高度
if (scrollTop + winHeight == docHeight) { //如果窗口高度+滚轮滑动的高度=文档高度就是到达最底部了
//console.log(1);
that.fetchImg();
}
})
}
}
</script>
</body>
</html>
访问：http://127.0.0.1:8080/imgs.html
Django-瀑布流的更多相关文章
- 【Python之路】特别篇--Django瀑布流实现
瀑布流 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinteres ...
- Django实现瀑布流，组合搜索
Django中组合搜索功能 需求分析 很多电商网站中有组合搜索的功能,所谓组合搜索就是网页中组合多个条件,对数据库中进行查询,并且将结果显示在页面中,看个例子吧: 注意红框中的标识,我们可以根据URL ...
- JavaScript中作用域回顾（避免使用全局变量）（瀑布流的实现）（scroll事件）以及Django自定义模板函数回顾
页面显示照片样式为瀑布流: 上面的div个数可以按照自己安排进行划分.img的分布可以使用模板标签以及自定义模板函数进行排布: 自定义模板函数实现可以看,最后几列:python---django中模板 ...
- django实现瀑布流、组合搜索、阶梯评论、验证码
django实现图片瀑布流布局 我们在一些图片网站上经常会看到,满屏都是图片,而且图片都大小不一,却可以按空间排列.默认一个div是占用一行,当想把div里的图片并排显示的时候,只能使用float属性 ...
- Django模板语言中的自定义方法filter过滤器实现web网页的瀑布流
模板语言自定义方法介绍 自定义方法注意事项 Django中有simple_tag 和 filter 两种自定义方法,之前也提到过,需要注意的是 扩展目录名称必须是templatetags templa ...
- Django之瀑布流
一. 小功能瀑布流的实现 1.完成效果图 2.代码部分 <1>models.py from django.db import models # Create your models her ...
- Django 之瀑布流实现
需求分析 现在是 "图片为王"的时代,在浏览一些网站时,经常会看到类似于这种满屏都是图片.图片大小不一,却按空间排列,就这是瀑布流布局. 以瀑布流形式布局,从数据库中取出图片 每次 ...
- 轮播组件/瀑布流/组合搜索/KindEditor插件
一.企业官网 ### 瀑布流 Models.Student.objects.all() #获取所有学员信息 通过div进行循环图片和字幕 1.以template模板方法实现瀑布流以列为单位 ...
- jquery瀑布流的制作
首先,还是来看一下炫酷的页面: 今天就边做边说了: 一.准备工作 新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述 ...
- js瀑布流 原理实现揭秘 javascript 原生实现
web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...
随机推荐
- OCR技术浅析-自写篇（2）
本例仅以本人浅薄理解,妄想自制文字识别程序,实际在识别部分未有完善. <?php class readChar{ private $imgSize; //图片尺寸 private $imgGd2 ...
- Zabbix 3.0的前端默认在Centos 6上不支持
由于PHP版本的原因,RHEL 6上的Zabbix前端不受支持. 由于Zabbix 3.0的要求是PHP 5.4.0或更高版本,而RHEL 6最新版本是5.3.3. 在大多数情况下,Zabbix服务器 ...
- Shell命令-文件及内容处理之cut、rev
文件及内容处理 - cut.rev 1. cut:切割文件内容 cut命令的功能说明 cut 命令用于显示每行从开头算起num1 到 num2 的文字. cut命令的语法格式 cut [OPTION] ...
- ABP项目概述
在系统性介绍整个ABP框架之前,我们首先需要对ABP框架有一个大概的了解,ABP框架的全称是:Asp.Net Boilerplate Project(即Asp.Net 的样板项目)顾名思义就是能够通过 ...
- AJAX异步、sweetalert、Cookie和Session初识
一.AJAX的异步示例 1. urls.py from django.conf.urls import url from apptest import views urlpatterns = [ ur ...
- linux 安装所有软件可以使用这个网站搜索RPM包
#很方便很实用 强烈推荐 https://pkgs.org/
- [LOJ3083][GXOI/GZOI2019]与或和——单调栈
题目链接: [GXOI/GZOI2019]与或和 既然求的是二进制运算的和,那么我们按位考虑,这样就将矩阵变成了一个$01$矩阵. 对于或运算,就是求有多少个子矩形中有$1$. 直接求不好办,考虑有多 ...
- Apache服务器配置与管理
一.Apache服务器的目录和文件 1.WEB站点目录 /var/www Apache站点文件的目录 /var/www/html 存放WEB站点的WEB文件 /var/www/cgi-bin CGI程 ...
- 解决每次从cmd进入sqlplus，都得重新设置pagesize、linesize的问题
https://blog.csdn.net/u012127798/article/details/34146143/ Oracle里的set零零碎碎的,这里整理归纳一下 SQL> set tim ...
- 解决远程连接MongoDB出现错误
前言:最近准备学习下MongoDB,安装什么的都已经弄完了,想远程连接来管理MongoDB,用的软件是robo 3t 第一次连的时候就出错误了 大概意思是连接失败,解决如下 第一步,首先检查你的服务器 ...