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

    效果图:

    人生短短数十载,经不起几次重头再来
  • 相关阅读:
    GCJ 2015-Qualification-A Standing Ovation 难度:0
    CF 103E Buying Sets 最大权闭合子图,匹配 难度:4
    HDU 1560 DNA sequence A* 难度:1
    蓝桥杯练习系统 矩阵翻硬币 大数,牛顿迭代法 难度:2
    Operating System Concepts with java 项目: Shell Unix 和历史特点
    HDU 2181 哈密顿绕行世界问题 dfs 难度:1
    HDU 3533 Escape bfs 难度:1
    HDU 3567 Eight II 打表,康托展开,bfs,g++提交可过c++不可过 难度:3
    POJ 1011 Sticks dfs,剪枝 难度:2
    UVALive 5905 Pool Construction 最小割,s-t割性质 难度:3
  • 原文地址:https://www.cnblogs.com/bk770466199/p/6377601.html
Copyright © 2011-2022 走看看