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实现了一个,下面会附上源码,供大家解读. 说 ...
随机推荐
- JS操作数组-2
1. 找出数组 arr 中重复出现过的元素 function duplicates(arr) { var result = []; var count = []; for (var i=0;i< ...
- vue应用或者是项目其实就是 实例（完成基本逻辑） + 组件（单文件组件，全局组件，局部组件，内置组件）来完成 ;
以上! 组件里面包含HTML,css, js,也就是一个完整的功能!
- jQuery对象与DOM对象之间的转换(转)
原文:https://www.cnblogs.com/lsy0403/p/5907084.html 什么是DOM对象 使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象.比如使用 ...
- asp.net core 2.1认证
asp.net core 2.1认证 这篇文章基于asp.net core的CookieAuthenticationHandler来讲述. 认证和授权很相似,他们的英文也很相似,一个是Authenti ...
- Python——Flask框架
Flask框架相关知识构架 程序的基本结构 模板 Web表单 数据库 电子邮件 程序的结构 用户认证
- Bugku 杂项 眼见非实
把文件放进Kali中可以看到这是一个zip文件,解压后得到一个docx,继续翻 (在windows中是打不开的 在word/document.xml中可以找到flag
- php中fastcgi和php-fpm是什么东西
参考和学习了以下文章: 1. mod_php和mod_fastcgi和php-fpm的介绍,对比,和性能数据 2. 实战Nginx_取代 为了如何一步步的引出fastcgi和php-fpm,我先一点一 ...
- 【BZOJ5495】[十二省联考2019]异或粽子（主席树，贪心）
[BZOJ5495][十二省联考2019]异或粽子(主席树,贪心) 题面 BZOJ 洛谷 题解 这不是送分题吗... 转异或前缀和,构建可持久化\(Trie\). 然后拿一个堆维护每次的最大值,每次如 ...
- 一丢丢学习之webpack4 + Vue单文件组件的应用
之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...
- 我眼中的支持向量机（SVM）
看吴恩达支持向量机的学习视频,看了好几遍,才有一点的理解,梳理一下相关知识. (1)优化目标: 支持向量机也是属于监督学习算法,先从优化目标开始. 优化目标是从Logistics regressi ...