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

    效果图:

    人生短短数十载,经不起几次重头再来
  • 相关阅读:
    尚硅谷Docker笔记(6) DockerFile解析
    注意防踩坑系列
    尚硅谷Docker笔记(1) Docker简介
    尚硅谷Docker笔记(4) Docker 镜像
    尚硅谷Docker笔记(8) 本地镜像发布到阿里云
    尚硅谷Docker笔记(2) Docker安装
    SQL中join连接查询时条件放在on后与where后的区别
    尚硅谷Docker笔记(3) Docker常用命令
    尚硅谷Docker笔记(7) Docker常用软件安装
    关于存储过程的几个sql
  • 原文地址:https://www.cnblogs.com/bk770466199/p/6377601.html
Copyright © 2011-2022 走看看