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实现了一个,下面会附上源码,供大家解读. 说 ...
随机推荐
- SQL 无法连接服务器
错误信息:provider:SQL Network Interfaces, error:52-无法定位 LOCA Database Runtime 安装.请验证SQL Server Express是否 ...
- SSH服务器拒绝了密码，请再试一次
使用Xshell连接ubuntu后,出现: SSH服务器拒绝了密码,请再试一次! 输入: cd /etc/ssh/ 继续: vim sshd_config 若此时提示没有安装vim,那我们安装以下: ...
- React Native之配置URL Scheme(iOS Android)
React Native之配置URL Scheme(iOS Android) 一,需求分析 1.1,需要在网站中打开/唤起app,或其他app中打开app,则需要设置URL Scheme.比如微信的是 ...
- apt-get软件包管理命令 和 apt-key命令
apt-get命令是Debian Linux发行版中的APT软件包管理工具. 所有基于Debian的发行都使用这个包管理系统.deb包可以把一个应用的文件包在一起,大体就如同Windows上的安装文件 ...
- 【并发编程】【JDK源码】JDK的（J.U.C）java.util.concurrent包结构
本文从JDK源码包中截取出concurrent包的所有类,对该包整体结构进行一个概述. 在JDK1.5之前,Java中要进行并发编程时,通常需要由程序员独立完成代码实现.当然也有一些开源的框架提供了这 ...
- jenkins在windows及linux环境下安装
下载 下载地址: https://jenkins.io/download/ 下载windows和linux通用的war包 jenkins在windows下安装 前提:已经安装jdk.tomcat 将w ...
- matlab里面如何保留小数特定位数
[转载]Matlab取整函数有: fix, floor, ceil, round.取整函数在编程时有很大用处. 一.取整函数 1.向零取整(截尾取整) fix-向零取整(Round towards z ...
- Java NIO系列教程（一） Java NIO 概述
<I/O模型之四:Java 浅析I/O模型> 一.阻塞IO与非阻塞IO 阻塞IO: 通常在进行同步I/O操作时,如果读取数据,代码会阻塞直至有 可供读取的数据.同样,写入调用将会阻塞直至数 ...
- ZooKeeper-集群模式安装
下载地址:https://zookeeper.apache.org/releases.html 至少需要准备三台节点(这里为h136.h138.h140),ZooKeeper 需要 JDK,关于 JD ...
- 第六节：框架搭建之EF的Fluent Api模式的使用流程
一. 前言 沉寂了约一个月的时间,今天用一篇简单的文章重新回归博客,主要来探讨一下Fluent Api模式在实际项目中的使用流程. 1. Fluent API属于EF CodeFirst模式的一种,E ...