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实现了一个,下面会附上源码,供大家解读. 说 ...
随机推荐
- mybatis的foreach标签
今天写sql发现了一点问题,乱弄了好久算是搞定了.关于mybatis的批量插入使用foreach插入形式为: insert into role_privilege( role_id, privileg ...
- Mac之brew使用
brew : 终端程序管理工具 能让你更快速的安装你想要的工具.而不用考虑大量的依赖. 安装命令 给官网的一样也可以自己去官网查看 它就类似于centos下的yum 和 Ubuntu下的apt-get ...
- Java 如何存取MySQL datetime类型
1 在java中只有Date类型,这样数据存储到MySQL会出现问题,前台提交的数据,比如2018-03-20 17:30:59,后台用Date接受的时候,由于Date只精确到天,所以默认接收时间为2 ...
- 使用 Python 爬取网页数据
1. 使用 urllib.request 获取网页 urllib 是 Python 內建的 HTTP 库, 使用 urllib 可以只需要很简单的步骤就能高效采集数据; 配合 Beautiful 等 ...
- Python学习之路——三元运算符推导式
三元运算符 # 生成器:包含yield关键字的函数就是生成器 def my_generator(): yield 1 yield 2 yield 3 g_obj = my_generator() # ...
- 六、Java多人博客系统-2.0版本-代码实现
1.前后端分离,后端使用spring boot,只负责提供数据,对外暴露Restful API.前端使用vue,只负责展示数据和向后台提交数据. 2.数据库使用mariadb,存储所有数据. 3.前端 ...
- mongoDB 集合（表）操作
mongoDB 集合(表)操作 集合命名规则 使用 utf8 字符(通常不会起中文名字) 不能含有 "\0" 字符 不要以 system. 开头(否咋会覆盖系统集合开头) 不要和关 ...
- MT【314】正切比值
(05复旦)已知三角形$\Delta ABC$满足$\tan A:\tan B:\tan C=1:2:3$,求$\dfrac{AC}{AB}$____ 解答:设$x=tan A$,利用恒等式$\tan ...
- nuxt.js实战之引入jquery
head: { title: 'nuxt', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-widt ...
- COGS 2353 2355 2356 2358 有标号的DAG计数
不用连通 枚举入度为0的一层 卷积 发现有式子: 由$n^2-i^2-(n-i)^2=2*i*(n-i)$ 可得$2^{i*(n-i)}=\frac{{\sqrt 2}^{(n^2)}}{{\sqrt ...