【Python之路】特别篇--Django瀑布流实现
瀑布流
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。
实现效果:
数据存放方式:
实现方式一: 自定义模版语言(simple_tag)
思路: 后端获取数据,,前端页面使用自定义模板语言,实现第一条数据放第一个div,...,(通过求余数实现),返回标签字符串,页面显示.
实现方法:
1.在app中创建templatetags模块
2.创建任意 .py 文件，如：newtag.py
from django import template
from django.utils.safestring import mark_safe register = template.Library()
3.后台获取数据
def student(request):
queryset_dict = models.StudentDetail.objects.filter(student__status=1).values('letter_of_thanks','student__name','student__pic','student__company','student__salary') return render(request,'home.html',{'queryset_dict':queryset_dict})
4.前端使用模板语言 for循环得到每一个item数据
<div style="width: 245px;float: left">
{% for item in queryset_dict %}
....
{% endfor %}
</div>
5.自定义模版语言,
实现:传入item数据 , 当前循环的次数 , => 通过次数 , 求余判断, 数据放在div1 还是div2 ,.... ,
@register.simple_tag
def image_show(item,counter,allcount,remainder):
'''
:param item: 当前循环获取的数据
:param counter: 当前循环次数(模版语言for循环默认从1开始)
:param allcount: 页面分布列数
:param remainder: 余数
:return:
'''
TEMP = '''
<div style="width: 245px;" >
<img src="/%s" alt="" style="width: 245px;height: 250px">
<p>%s</p>
<p>%s</p>
</div>
'''
if counter%allcount == remainder:
TEMP = TEMP %(item['student__pic'],
item['student__name'],
item['letter_of_thanks'],
)
return mark_safe(TEMP)
else:
return ''
注意:模版语言默认会返回None , 所以要设置返回空字符串
6.前端调用:
<div style="width: 245px;float: left">
{% for item in queryset_dict %}
{% image_show item forloop.counter 4 1 %}
{% endfor %}
</div>
forloop.counter 获取当前循环的次数 (默认从1开始递增!)
7.div2,div3,div4 同上
完整代码:
from django import template
from django.utils.safestring import mark_safe register = template.Library() @register.simple_tag
def image_show(item,counter,allcount,remainder):
'''
:param item: 当前循环获取的数据
:param counter: 当前循环次数(模版语言for循环默认从1开始)
:param allcount: 页面分布列数
:param remainder: 余数
:return:
''' TEMP = '''
<div style="width: 245px;" >
<img src="/%s" alt="" style="width: 245px;height: 250px">
<p>%s</p>
<p>%s</p>
</div>
'''
if counter%allcount == remainder:
TEMP = TEMP %(item['student__pic'],
item['student__name'],
item['letter_of_thanks'],
)
return mark_safe(TEMP)
else:
return ''
自定义模版语言
{% load newtag %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.clearfix:after{
content: 'x';
height: 0;
visibility: hidden;
clear: both;
display: block;
}
.stu{
margin:0 auto;
width: 980px;
}
</style>
</head>
<body>
<div class="clearfix stu">
<div style="width: 245px;float: left">
{% for item in queryset_dict %}
{% image_show item forloop.counter 4 1 %}
{% endfor %}
</div>
<div style="width: 245px;float: left">
{% for item in queryset_dict %}
{% image_show item forloop.counter 4 2 %}
{% endfor %}
</div>
<div style="width: 245px;float: left">
{% for item in queryset_dict %}
{% image_show item forloop.counter 4 3 %}
{% endfor %}
</div>
<div style="width: 245px;float: left">
{% for item in queryset_dict %}
{% image_show item forloop.counter 4 0 %}
{% endfor %}
</div>
</div>
</body>
</html>
前端页面
实现方式二: 自定义模版语言(filter)
区别:
1.自定义的模版语言使用filter 而不是simple_tag
2.自定义的filter 支持if 条件判断来使用! , 而 simple_tag不支持
{% if filter模版语言返回结果 %}
...
{% endif %}
或 {{ filter模版语言 }}
前端设计思路:
1.如果if条件 满足,则把数据填充在该div上.
<div style="width: 245px;float: left">
{% for item in queryset_dict %}
{% if filter模版语言返回结果 %}
<div style="width: 245px;" >
<img src="/{{ item.student__pic }}" alt="" style="width: 245px;height: 250px">
<p>{{ item.student__name }}</p>
<p>{{ item.letter_of_thanks }}</p>
</div>
{% endif %}
{% endfor %}
</div>
2.filter 用法:
默认只允许 传入2个参数,如果传入参数过多,就传入字符串,然后分割!
@register.filter
def image_show2(value,arg): countet = value # 当前for循环次数
allcount = int(arg.split(',')[0]) # 前端页面列数
remainder = int(arg.split(',')[1]) # 余数
if countet%allcount == remainder:
return True
else:
return False
3.filter使用方法:
{{ 参数1 | filter :参数2 }}
4.前端页面:
<div style="width: 245px;float: left">
{% for item in queryset_dict %}
{% if forloop.counter|image_show2:"4,0" %}
<div style="width: 245px;" >
<img src="/{{ item.student__pic }}" alt="" style="width: 245px;height: 250px">
<p>{{ item.student__name }}</p>
<p>{{ item.letter_of_thanks }}</p>
</div>
{% endif %}
{% endfor %}
</div>
注意: img标签的 src 地址斜杠 /
实现方式三: JQ中Ajax实现
设计思路:
1.访问页面,
2.自动发送ajax请求
3.ajax获取数据
4.求余判断,生成标签.页面添加标签
实现方法:
1.后台判断,Ajax发送的POST请求, => 数据库查询获取数据,
def student1(request):
if request.method == 'POST':
queryset_dict = models.StudentDetail.objects.filter(student__status=1).values('letter_of_thanks',
'student__name', 'student__pic',
'student__company',
'student__salary')
queryset_list = list(queryset_dict)
return HttpResponse(json.dumps(queryset_list))
else:
return render(request,'student.html')
注意: 后台获取的数据形式为 QuerySet[{数据1},{数据2}] , 需要先转换成列表形式 再json.dumps()
2.json返回前端.
3.前端JQ创建标签,填充数据,把标签添加到div1,div2,...上
$.each(data,function (k,v) {
k = k + 1;
var div = document.createElement('div');
div.className ='item';
var img = document.createElement('img');
img.src='/'+v.student__pic;
var p1 = document.createElement('p');
p1.innerText = v.letter_of_thanks;
div.appendChild(img);
div.appendChild(p1);
if(k%4 == 1){
$('#container').children(':eq(0)').append(div);
}else if(k%4 == 2){
$('#container').children(':eq(1)').append(div);
}else if(k%4 == 3){
$('#container').children(':eq(2)').append(div);
}else if(k%4 == 0){
$('#container').children(':eq(3)').append(div);
}else {
console.log('error')
}
})
完整代码:
from django.shortcuts import render,HttpResponse
import json # Create your views here.
from app01 import models def student1(request): if request.method == 'POST':
queryset_dict = models.StudentDetail.objects.filter(student__status=1).values('letter_of_thanks',
'student__name', 'student__pic',
'student__company',
'student__salary')
queryset_list = list(queryset_dict) return HttpResponse(json.dumps(queryset_list))
else:
return render(request,'student.html')
后台代码
{% load newtag %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.clearfix:after{
content: 'x';
height: 0;
visibility: hidden;
clear: both;
display: block;
}
.stu{
margin:0 auto;
width: 980px;
}
.item{
width:245px;
}
.item img{
width: 245px;
height: 250px;
}
</style>
</head>
<body>
<div class="clearfix stu" id="container">
<div style="width: 245px;float: left">
</div>
<div style="width: 245px;float: left">
</div>
<div style="width: 245px;float: left">
</div>
<div style="width: 245px;float: left">
</div>
</div>
<script src="/static/js/jquery-2.1.4.min.js"></script>
<script>
$(function () {
$.ajax({
url:'/student1/',
type:'POST',
dataType:'json',
success:function (data) {
console.log('ok');
console.log(data);
$.each(data,function (k,v) {
k = k + 1;
var div = document.createElement('div');
div.className ='item';
var img = document.createElement('img');
img.src='/'+v.student__pic;
var p1 = document.createElement('p');
var p2 = document.createElement('p');
p1.innerText = v.student__name;
p2.innerText = v.letter_of_thanks;
div.appendChild(img);
div.appendChild(p1);
div.appendChild(p2);
console.log(div);
if(k%4 == 1){
$('#container').children(':eq(0)').append(div);
}else if(k%4 == 2){
$('#container').children(':eq(1)').append(div);
}else if(k%4 == 3){
$('#container').children(':eq(2)').append(div);
}else if(k%4 == 0){
$('#container').children(':eq(3)').append(div);
}else {
console.log('error')
}
})
}
})
})
</script>
</body>
</html>
前端页面
【Python之路】特别篇--Django瀑布流实现的更多相关文章
- 【Python之路】特别篇--Django生产环境部署
Django的部署可以有很多方式,采用nginx+uwsgi的方式是其中比较常见的一种方式. uWSGI uWSGI是一个Web服务器,它实现了WSGI协议.uwsgi.http等协议.Nginx中H ...
- python之路基础篇
基础篇 1.Python基础之初识python 2.Python数据类型之字符串 3.Python数据类型之列表 4.Python数据类型之元祖 5.Python数据类型之字典 6.Python Se ...
- python之路入门篇
一. Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,Guido开始写能够解释Python语言语法的解释器.Python这个名字,来 ...
- python之路——基础篇（2）模块
模块:os.sys.time.logging.json/pickle.hashlib.random.re 模块分为三种: 自定义模块 第三方模块 内置模块 自定义模块 1.定义模块 将一系列功能函数或 ...
- python之路第一篇
一.python环境的搭建 1.window下环境的搭建 (1).在 https://www.python.org/downloads/ 下载自己系统所需要的python版本 (2).安装python ...
- python之路第二篇（基础篇）
入门知识: 一.关于作用域: 对于变量的作用域,执行声明并在内存中存在,该变量就可以在下面的代码中使用. if 10 == 10: name = 'allen' print name 以下结论对吗? ...
- Python之路(第九篇)Python文件操作
一.文件的操作 文件句柄 = open('文件路径+文件名', '模式') 例子 f = open("test.txt","r",encoding = “utf ...
- Python之路(第二篇)：Python基本数据类型字符串（一）
一.基础 1.编码 UTF-8:中文占3个字节 GBK:中文占2个字节 Unicode.UTF-8.GBK三者关系 ascii码是只能表示英文字符,用8个字节表示英文,unicode是统一码,世界通用 ...
- Python之路(第一篇)：Python简介和基础
一.开发简介 1.开发: 开发语言: 高级语言:python.JAVA.PHP.C#..ruby.Go-->字节码 低级语言: ...
随机推荐
- 【Jmeter源码解读】001——目录结构
1.顶层目录 bin - 包含.bat 和 . sh 这些文件用于启动JMeter.同时也包含了ApacheJmeter.jar 和 相关的配置文件 build - build 脚本创建的目录,存放一 ...
- springboot中配置文件使用2
本文章接上一篇文章:https://www.cnblogs.com/ysq0908/p/11140931.html 1.使用注解@Value获取配置文件的值 注意:上述中的复杂数据封装指:有map等数 ...
- Comet OJ Contest #15 D. 双十一特惠（困难版）
以 $d(x)$ 表示正整数 $x$ 的十进制表示的数位之和.熟知下列关于 $d(x)$ 的结论: $d(x) \equiv x \pmod{9}$.从而对于任意正整数列 $a_1, a_2, \do ...
- web前端页面解决中文传参乱码问题
问题背景:在项目中往往会涉及到前端跳转页面时要传一些参数给下一个页面,如果参数是英文或者数字的时候就很好解决,然而有时候传参会涉及到中文汉字,这个时候再单纯的拼接往往就会导致中文乱码,下面我们就该讨论 ...
- Codeforces Round #590 (Div. 3) Editorial
Codeforces Round #590 (Div. 3) Editorial 题目链接 官方题解 不要因为走得太远,就忘记为什么出发! Problem A 题目大意:商店有n件商品,每件商品有不同 ...
- python3启航
Python3的基本数据类型 数字 int ,所有功能都放在int里 a1 = 123 a2 = 456 ##int 将字符串转换为数字 a = "123" print(tyep( ...
- 异常处理 try
语法错误 这种错误的不能使用异常处理,你自己粗心写错怪谁,哼哼哼 比如说少冒号啦,丢了括号啦 逻辑错误 try: num = int(input("请输入数字")) print(1 ...
- 研究旧项目, 常用 sql 语句
1. select all table select TABLE_NAME from CodingSystem.INFORMATION_SCHEMA.TABLES where TABLE_TYPE = ...
- 刚接触neo4j 问下 neo4j 生成的节点图形可以发布为纯网页方式么
6 回复 pangguoming 1楼•3 年前 你是想要neo4j web控制端的可视化功能吗? 那是用D3.js 做的,你用前端用D3.js配合Java自己做 或者 去下载neo4j 的前端 开源 ...
- STM32 USB Virtual COM
STM32 USB Virtual COM USB转串口的功能实现 这次讲的是如何实现USB转串口功能的实现.首先看看工程的布局吧: 我们主要要介绍的文件的在USB_User这个组文件.从上面的截 ...