【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>
