实现瀑布流的多种方法
这里用到@register.filter和@register.simple_tag模板功能不够用时才会使用
1.实现瀑布流
1.@register.filter 只可以传2个参数，前端可以if判断
2.@register.simple_tag 自定制模板
3. ajax
1、@register.simple_tag 自定制模板
# 自定义simple__tag 不可以做if判断
##views.py
def student(request):
# student
# studentDetail
detail_list = models.StudentDetail.objects.filter(student__status=1).values('letter_of_thanks', "student__name",
"student__salary", 'student__company',
'student__pic')
##获取数据库的内容
print(detail_list)
return render(request, 'student.html', {'detail_list': detail_list}) ##返回到前端
在app1下面创建 templatetags 文件夹
创建文件
xx.py
from django import template
from django.utils.safestring import mark_safe
from django.template.base import resolve_variable, Node, TemplateSyntaxError
register = template.Library()
@register.simple_tag
def detail1(item,counter,allcount,remainder):
# counter 当前循环的索引 allcount总列数 #余数
temp = """
<div style="width: 245px;">
<img style="width: 245px;height: 200px;" src="/%s">
<p>%s</p>
<p>%s</p>
<p>%s</p>
</div>
"""
if counter%allcount == remainder:
#当前循环的索引 除以总列数（4列），得到余数
temp = temp %(item['student__pic'],
item['student__name'],
item['student__salary'],
item['letter_of_thanks'])
return mark_safe(temp)
# mark_safe 传入的不是字符串，是前端代码
else:
return ""
# HTMl的文件
#
{% load xx %}
{#传入模块#}
<!DOCTYPE html>
<body>
<div>
</div>
<style>
.clearfix:after{
content: '.';
visibility: hidden;
height: 0;
clear: both;
display: block;
}
</style>
<div style="margin: 0 auto;width: 980px;" class="clearfix">
<div style="width: 245px;float: left">
{% for item in detail_list %} {# 循环前端发来的数据 #}
{% detail1 item forloop.counter 4 1 %} {# 执行那个模块中的方法 余数等于1的话放到这 #}
{# forloop.counter当前循环到多少 4列 #}
{% endfor %}
</div>
<div style="width: 245px;float: left">
{% for item in detail_list %}
{% detail1 item forloop.counter 4 2 %} {# 执行那个模块中的方法 余数等于3的话放到这 #}
{% endfor %}
</div>
<div style="width: 245px;float: left">
{% for item in detail_list %}
{% detail1 item forloop.counter 4 3 %} {# 执行那个模块中的方法 余数等于4的话放到这 #}
{% endfor %}
</div>
<div style="width: 245px;float: left">
{% for item in detail_list %}
{% detail1 item forloop.counter 4 0 %} {# 执行那个模块中的方法 余数等于0的话放到这 #}
{% endfor %}
</div>
</div>
2.@register.filter 只可以传2个参数，前端可以if判断
#views.py
def student(request):
# student
# studentDetail
detail_list = models.StudentDetail.objects.filter(student__status=1).values('letter_of_thanks', "student__name",
"student__salary", 'student__company',
'student__pic')
##获取数据库的内容
print(detail_list)
return render(request, 'student.html', {'detail_list': detail_list}) ##返回到前端
在app1下面创建 templatetags 文件夹
创建文件
xx.py
@register.filter ##只能传2个参数
def detail3(value, arg): ##value循环的到的当前索引 这里的arg 是总列数，和余数
'''
:param values:
:param arg:
:return:
'''
allcount, remainder = arg.split(',') ##把总列数和余数进行分割
allcount = int(allcount) ##转换类型
remainder = int(remainder)
if value % allcount == remainder: ##求余数
return True
return False
# html.py
{% load xx %}
{#传入模块#}
<!DOCTYPE html>
<body>
<div style="width: 245px;float: left">
{% for item in detail_list %} {# 循环前端发过来的数据 #}
{% if forloop.counter|detail3:"4,0" %} {# 循环到的索引 函和'总列数，余数' 放到detail3这个方法中
这里这可以传2个参数 ，要循环除别的列，直接改余数就可以 #}
<div style="width: 245px;">
<img style="width: 245px;height: 200px;" src="/{{ item.student__pic }}"> {# 图片 #}
<p>{{ item.student__name }}</p> {# 姓名 #}
<p>{{ item.student__salary }}</p> {# 。。。。 #}
<p>{{ item.letter_of_thanks }}</p>
</div>
{% endif %}
{% endfor %}
</div>
ajax瀑布流方式
# view.py
def student1(request):
if request.method == 'POST':
detail_list = models.StudentDetail.objects.filter(student__status=1).values('letter_of_thanks', "student__name",
"student__salary",
'student__company', 'student__pic')
detail_list = list(detail_list) ##数据库得到的数据转换成列表类型
return HttpResponse(json.dumps(detail_list)) ##转换成字符串
# student
# studentDetail
# detail_list = models.StudentDetail.objects.filter(student__status=1).values('letter_of_thanks',"student__name","student__salary",'student__company', 'student__pic')
return render(request,'student1.html') ##get发送页面
# student1.html
{% load xx %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
</div>
<style>
.clearfix:after{
content: '.';
visibility: hidden;
height: 0;
clear: both;
display: block;
}
.c1{
width: 245px;
}
.c1 img{
width: 245px;
height: 200px;
}
</style>
<div id="container" style="margin: 0 auto;width: 980px;" class="clearfix">
<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 (arg) {
//arg = JSON.parse(arg);
// arg = JSON.stringify(arg)
$.each(arg, function (k,v) {
k = k + 1;
var div = document.createElement('div'); //创建标签
div.className = 'c1'; //定义属性
var img = document.createElement('img'); // 创建img标签
rat =img.src = "/" + v.student__pic; // 家伙是哪个属性
console.log(rat); //传过来是路劲
var p = document.createElement('p'); //
cnm =p.innerText = v.letter_of_thanks; //
console.log(cnm); //这里输出内容
div.appendChild(img); //
div.appendChild(p); //
if(k%4 == 1){
$('#container').children(':eq(0)').append(div);
//children 所有的子元素， eq 索引
}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{
}
})
}
})
})
</script>
</body>
</html>
