zoukankan      html  css  js  c++  java
  • 【python】瀑布流

    前端HTML

    {% load tags %}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
    
            .container{
                width: 900px;
                margin: 0 auto;
                background-color: antiquewhite;
            }
            .container .item{
                width: 200px;
                float: left;
            }
            .container .item img{
                width: 250px;
                height: 200px;
                padding: 10px;
            }
            .falls{
                float: left;
                margin-left: 20px;
                width: 250px;
    
            }
            .falls img{
                width: 250px;
                height: 200px;
                border-radius: 5px;
                margin-top: 5px;
            }
        </style>
    </head>
    <body class="container">
        <div style=" 900px;margin: 0 auto">
            <div class="falls">
                {% for row in user_list %}
    
                    {% if forloop.counter|test:"3,1" %}
                        <div>
                            <img src="{{ row.src }}">
                            <p>{{ row.name }} => {{ forloop.counter }}</p>
                            <p>{{ row.summary }}</p>
                        </div>
                    {% endif %}
                {% endfor %}
    
            </div>
            <div class="falls">
                {% for row in user_list %}
    
                    {% if forloop.counter|test:"3,2" %}
                        <div>
                            <img src="{{ row.src }}">
                            <p>{{ row.name }} => {{ forloop.counter }}</p>
                            <p>{{ row.summary }}</p>
                        </div>
                    {% endif %}
                {% endfor %}
    
            </div>
            <div class="falls">
                {% for row in user_list %}
    
                    {% if forloop.counter|test:"3,0" %}
                        <div>
                            <img src="{{ row.src }}">
                            <p>{{ row.name }} => {{ forloop.counter }}</p>
                            <p>{{ row.summary }}</p>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    
    
    </body>
    </html>

    VIEWS

      

    def falls(request):
        user_list = [
            {'name': '张三', 'src': '/static/7777.jpeg', 'company': 'aaaaaaa',
             'summary': '夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深夜深'},
            {'name': '李四', 'src': '/static/1111.jpeg', 'company': 'sssss', 'summary': '晚上晚上晚上晚上晚上晚上晚上晚上晚上晚上晚上晚上晚上晚上晚上'},
            {'name': '王五', 'src': '/static/2222.jpeg', 'company': 'ddddddd', 'summary': '耳朵耳朵耳朵耳朵耳朵耳朵耳朵耳朵耳朵耳朵耳朵耳朵耳朵耳朵耳朵耳朵耳朵耳朵耳朵耳朵耳朵耳朵'},
            {'name': '赵六', 'src': '/static/3333.jpeg', 'company': 'ffffff', 'summary': '前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端'},
            {'name': '田七', 'src': '/static/4444.jpeg', 'company': 'ggggg', 'summary': '晚饭晚饭晚饭晚饭晚饭晚饭晚饭晚饭晚饭晚饭晚饭晚饭晚饭晚饭晚饭晚饭晚饭'},
            {'name': '刘八', 'src': '/static/5555.jpeg', 'company': 'hhhhh', 'summary': '通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过通过'},
            {'name': '九九', 'src': '/static/6666.jpeg', 'company': 'wwwww', 'summary': '用户用户用户用户用户用户用户用户用户用户用户用户用户用户用户'},
        ]
        return render(request, 'falls.html', {'user_list': user_list})

    tags

    from django.utils.safestring import mark_safe
    from django import template
    
    register = template.Library()
    #取余
    @register.filter
    def test(a1,a2):
        n1,n2 = a2.split(',')
        if a1 % int(n1) == int(n2):
            return True
        return False

    效果图:

    人生短短数十载,经不起几次重头再来
  • 相关阅读:
    【转】 DFT小讲座之2_DFT@芯片开发不同阶段
    【转】 DFT小讲座之1_扫盲!DFT到底是什么?
    MIPI接口与FPGA电平匹配问题
    ZCU102之display
    Vivado将模块封装为IP的方法(网表文件)【转】
    YUV格式总结【转】
    MPSOC之7——开发流程uramdisk
    MPSOC之2——ubuntu环境配置及petalinux安装
    MPSOC之3——centos环境配置及petalinux安装及使用
    2018软工实践—Beta冲刺(7)
  • 原文地址:https://www.cnblogs.com/bk770466199/p/6377601.html
Copyright © 2011-2022 走看看