一、瀑布流，是指页面布局中，在显示很多图片时，图片及文字大小不相同，导致页面排版不美观

如上图，右边的布局，因为第一行第一张图片过长，第二行的第一张被挤到第二列了。示例：

def flow(request):user_list = [{'name': '张1三', 'src': '/static/image/1.jpg', 'company': '特事特办中国特色一公司','summary': '一群老油条烦死打法撒飞洒的飞洒烦死哒防守打法噶三群老油条烦死哒范德萨分散发士大夫士大夫是打发发防守打法烦死哒防守打法噶第三方三'},{'name': '张2三', 'src': '/static/image/1.jpg', 'company': '特事特办中国特色一公司','summary': '一群老油'},{'name': '张3三', 'src': '/static/image/1.jpg', 'company': '特事特办中国特色一公司','summary': '一群老油条烦分打发发防守打法撒飞洒的飞洒烦死哒防守打法噶第三'},{'name': '张4三', 'src': '/static/image/1.jpg', 'company': '特事特办中国特色一公司','summary': '一群老油条烦死哒范德萨分散发士大夫士大夫是打发发防守打法烦死哒防守打法噶第三方三'},{'name': '张5三', 'src': '/static/image/1.jpg', 'company': '特事特办中国特色一公司','summary': '一群老油条烦死哒范德萨分散发士大夫士大夫是打发发防守打法'},{'name': '张6三', 'src': '/static/image/1.jpg', 'company': '特事特办中国特色一公司','summary': '一群老油条烦死哒范洒的飞洒烦死哒防守打法噶第三方三'},{'name': '张7三', 'src': '/static/image/1.jpg', 'company': '特事特办中国特色一公司','summary': '一群老油条烦死哒范德萨分散发士大夫士大夫是打发发防守打噶第三方三'},{'name': '张8三', 'src': '/static/image/1.jpg', 'company': '特事特办中国特色一公司','summary': '一法撒飞洒的飞洒烦死哒防守打法噶第三方三'},]return render(request,"flow.html",{'user_list':user_list})

{% for row in user_list %}
{ row.src }}">
{{ row.name }}
{{ row.summary }}
{% endfor %}

此时显示如下：

很不美观，解决方法，是先将页面分为三个div，让后让图片依次在三个div中排放。

纯静态HTML实现：

{ user_list.0.src }}">
{{ user_list.0.name }}1
{{ user_list.0.summary }}
fdsafdsafd
safsdafsd
afsdaff
assdf
{ user_list.0.src }}">
{{ user_list.0.name }}4
{{ user_list.0.summary }}
fdsafdsafd
safsdafsd
afsdaff
assdf
{ user_list.0.src }}">
{{ user_list.0.name }}2
{{ user_list.0.summary }}
{ user_list.0.src }}">
{{ user_list.0.name }}5
{{ user_list.0.summary }}
fdsafdsafd
safsdafsd
afsdaff
assdf
{ user_list.0.src }}">
{{ user_list.0.name }}3
{{ user_list.0.summary }}

这就实现了瀑布流，使用模板渲染：最初想法如下

       
{%  for row in user_list %}
{% if forloop.counter%3 == 1 %}   {# 这里出错 #}
{ row.src }}">
{{ row.name }}
{{ row.summary }}
{% endif %}
{% if forloop.counter%3 == 2 %}   {# 这里出错 #}
{ row.src }}">
{{ row.name }}
{{ row.summary }}
{% endif %}
{% if forloop.counter%3 == 0 %}   {# 这里出错 #}
{ row.src }}">
{{ row.name }}
{{ row.summary }}
{% endif %}
{% endfor %}

取模操作%无法在模板中使用，因为使用到了if语句，自定义标签不能用在模板if语句中，所以只能考虑使用过滤器filter：

{%  for row in user_list %}{% if forloop.counter|mymod:'3,1' %}
{ row.src }}">
{{ row.name }}{{ forloop.counter }}
{{ row.summary }}
{% endif %}{% endfor %}
{%  for row in user_list %}{% if forloop.counter|mymod:'3,2' %}
{ row.src }}">
{{ row.name }}{{ forloop.counter }}
{{ row.summary }}
{% endif %}{% endfor %}
{%  for row in user_list %}{% if forloop.counter|mymod:'3,0' %}
{ row.src }}">
{{ row.name }}{{ forloop.counter }}
{{ row.summary }}
{% endif %}{% endfor %}

# 过滤器
from django import templateregister = template.Library()@register.filter
def mymod(v1,v2):n1,n2 = v2.split(',')if v1%int(n1) == int(n2):return Truereturn False

以上是模板渲染，使用了多次的循环，效率不是很好。

使用JS实现，使用Ajax发送一个请求，得到数据，然后在js中进行余数的判断和前端的生成。

二、组合搜索/组合筛选

简单的组合搜索如下图：

建立相应的model：

from django.db import models
# Create your models here.class Level(models.Model):name = models.CharField(max_length=32)def __str__(self):return self.nameclass Category(models.Model):name = models.CharField(max_length=32)def __str__(self):return self.nameclass Video(models.Model):lv = models.ForeignKey(Level,on_delete=models.DO_NOTHING)cg = models.ForeignKey(Category,on_delete=models.DO_NOTHING)title = models.CharField(verbose_name="标题",max_length=64)summary = models.CharField(verbose_name="简介",max_length=128)img = models.ImageField(verbose_name="图片",upload_to="./static/images/video")href = models.CharField(verbose_name="视频地址",max_length=256)create_date = models.DateTimeField(auto_now_add=True)

创建路由项，这里查询的条件组合在路由项中，如下：

path('video--.html',views.video,name='video_alais'),

cg_id代表种类的id，lv_id代表级别的id

对应的视图函数：

def video(req,*args,**kwargs):condition = {}for k,v in kwargs.items():if v != 0:condition[k] = vprint(condition)category_list = models.Category.objects.all()level_list = models.Level.objects.all()result = models.Video.objects.filter(**condition)return  render(req,'video.html',{'category_list':category_list,'level_list':level_list,'result':result,'arg_dict':kwargs,})

前端模板文件video.html：

{% load tagandfilter %}




筛选条件
{% total_tag arg_dict "cg_id" %}:{% for item in category_list %}{% categroy_tag item arg_dict %}{% endfor %}
{% total_tag arg_dict "lv_id" %}:{% for item in level_list %}{% level_tag item arg_dict %}{% endfor %}
查询结果
{% for item in result %}
{ item.img }}">
{{ item.title }}
{{ item.summary }}
{{ item.create_date }}
{% endfor %}

模板中使用了自定义标签：

@register.simple_tag
def categroy_tag(obj,arg_dict):'''生成种类的A标签:param obj::param arg_dict::return:'''url = reverse("video_alais",kwargs={'cg_id':obj.id,'lv_id':arg_dict.get('lv_id')})if obj.id == arg_dict.get('cg_id'):tag = "%s" %(url,obj.name)return mark_safe(tag)else:tag = "%s" %(url,obj.name)return mark_safe(tag)@register.simple_tag
def level_tag(obj,arg_dict):'''生成级别的A标签:param obj::param arg_dict::return:'''url = reverse("video_alais", kwargs={'lv_id': obj.id, 'cg_id': arg_dict.get('cg_id')})if obj.id == arg_dict.get('lv_id'):tag = "%s" %(url,obj.name)return mark_safe(tag)else:tag = "%s" %(url,obj.name)return mark_safe(tag)@register.simple_tag
def total_tag(arg_dict,key):if key == 'cg_id':url = reverse("video_alais", kwargs={'cg_id': 0, 'lv_id': arg_dict.get('lv_id')})elif key == 'lv_id':url = reverse("video_alais", kwargs={'lv_id': 0, 'cg_id': arg_dict.get('cg_id')})else:url = ""tag = "全部：" %(url)return mark_safe(tag)

增加一个关联表：Direction，与种类表形成多对多关系：

class Direction(models.Model):name = models.CharField(max_length=32)d_2_c = models.ManyToManyField("Category")

使分类根据方向动态变化：大体如下

因为多了一个方向的选择项，路由项修改如下：

path('video2---.html',views.video2,name='video_alais2'),

视图函数views.video2：

def video2(req,*args,**kwargs):condition = {}dr_id = kwargs.get('dr_id')cg_id = kwargs.get('cg_id')lv_id = kwargs.get("lv_id")# 可能的请求：# 0-0-0.html 方向、分类、级别都是全部# 1-0-0.html 方向选择了1，分类、级别是全部，此时分类应该根据方向列出有哪些分类# 1-2-0.HTML 方向选择了1，分类选择了2，级别全部；分类先要根据方向列出可能的分类，在根据分类选择video#            还有一种可能，方向选择了1，而1方向对应的分类没有2，此时应该处理成分类为全部，即0direction_list = models.Direction.objects. all()level_list = models.Level.objects.all()if dr_id == 0:# 未选择方向category_list = models.Category.objects.all()if cg_id == 0:pass   # 未选择分类 - 未选择方向else:# 选择了分类 - 未选择方向models.Video.objects.filter(cg_id = cg_id)condition['cg_id'] = cg_idelse:# 选择了方向，将方向对应的分类项查询出来，对象的集合，是QuerySetcategory_list = models.Category.objects.filter(direction=dr_id)# 选取其中的id字段对象集合v = category_list.values_list('id')# print(v.query)  # 打印出查询的SQL语句cg_id_list = list(zip(*v))[0]  # id字段集合形成元组，即（1,2,3）的样子if cg_id == 0:# 未选择分类 - 选择了方向# 这种情况下，选择的条件就是选择全部分类id在cg_id_list元组中的所有video# 即在此方向下的所有分类都要查询出来condition['cg_id__in'] = cg_id_listelse:# 选择了分类，并且分类在cg_id_list中if cg_id in cg_id_list:condition['cg_id'] = cg_idelse:  # 选择了分类，并且分类不在cg_id_list中，这时就选择全部cg_id_list的全部condition['cg_id__in'] = cg_id_listkwargs['cg_id'] = 0if lv_id != 0:  # 级别是单独的condition['lv_id'] = lv_idresult = models.Video.objects.filter(**condition)  # 根据条件最终查询的video结果集合return  render(req,'video2.html',{'direction_list':direction_list,'category_list':category_list,'level_list':level_list,'result':result,'arg_dict':kwargs,})

前端模板video2.html

{% load tagandfilter %}




筛选条件
{% total_tag_2 arg_dict "dr_id" %}{% for item in direction_list %}{% dr_tag item arg_dict %}{% endfor %}
{% total_tag_2 arg_dict "cg_id" %}{% for item in category_list %}{% cg_tag item arg_dict %}{% endfor %}
{% total_tag_2 arg_dict "lv_id" %}{% for item in level_list %}{% lv_tag item arg_dict %}{% endfor %}
查询结果
{% for item in result %}
{ item.img }}">
{{ item.title }}
{{ item.summary }}
{{ item.create_date }}
{% endfor %}

自定义的标签：

@register.simple_tag
def dr_tag(obj,arg_dict):'''生成A标签:param obj::param arg_dict::return:'''url = reverse('video_alais2',kwargs={'dr_id':obj.id,'cg_id':arg_dict.get('cg_id'),'lv_id':arg_dict.get('lv_id')})if obj.id == arg_dict.get('dr_id'):tag = "%s" %(url,obj.name)return mark_safe(tag)else:tag = "%s" %(url,obj.name)return mark_safe(tag)@register.simple_tag
def cg_tag(obj,arg_dict):'''生成A标签:param obj::param arg_dict::return:'''url = reverse('video_alais2',kwargs={'dr_id':arg_dict.get('dr_id'),'cg_id':obj.id,'lv_id':arg_dict.get('lv_id')})if obj.id == arg_dict.get('cg_id'):tag = "%s" %(url,obj.name)return mark_safe(tag)else:tag = "%s" %(url,obj.name)return mark_safe(tag)@register.simple_tag
def lv_tag(obj,arg_dict):'''生成A标签:param obj::param arg_dict::return:'''url = reverse('video_alais2',kwargs={'dr_id':arg_dict.get('dr_id'),'cg_id':arg_dict.get('cg_id'),'lv_id':obj.id})if obj.id == arg_dict.get('lv_id'):tag = "%s" %(url,obj.name)return mark_safe(tag)else:tag = "%s" %(url,obj.name)return mark_safe(tag)@register.simple_tag
def total_tag_2(arg_dict,key):if key == 'dr_id':url = reverse("video_alais2", kwargs={'dr_id':0,'cg_id': arg_dict.get('cg_id'), 'lv_id': arg_dict.get('lv_id')})elif key == 'cg_id':url = reverse("video_alais2", kwargs={'dr_id': arg_dict.get('dr_id'), 'cg_id': 0, 'lv_id': arg_dict.get('lv_id')})elif key == 'lv_id':url = reverse("video_alais2", kwargs={'dr_id':arg_dict.get('dr_id'),'lv_id': 0, 'cg_id': arg_dict.get('cg_id')})else:url = ""if arg_dict.get(key) == 0:tag = "全部：" %(url,)else:tag = "全部：" % (url,)return mark_safe(tag)

主要的环节是逻辑上根据方向、分类、级别的选择，动态显示各个项，然后在综合条件下选择出video。