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

    效果图:

    人生短短数十载,经不起几次重头再来
  • 相关阅读:
    动态设置ImageView的大小
    URI和URL、URN的区别
    关于Android中的异步任务
    Android下如何理解onMeasure,onLayout的过程
    Android如何获取同包名应用的图标及名称
    Android4.0 监听 android 手机情景模式(有声、静音、振动)
    Android中裁剪一张图片
    Json解析国家气象局天气API
    Android中AnimationDrawable的使用
    POJ
  • 原文地址:https://www.cnblogs.com/bk770466199/p/6377601.html
Copyright © 2011-2022 走看看