【Python之路】特别篇

highoo 2019-03-20

展开全文

瀑布流

　　瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是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.后台获取数据

View Code

4.前端使用模板语言 for循环得到每一个item数据

View Code

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 同上

完整代码:

自定义模版语言

前端页面

实现方式二: 自定义模版语言(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>