【Python之路】特别篇--Django瀑布流实现

瀑布流

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

def student(request):

    queryset_dict = models.StudentDetail.objects.filter(student__status=1).values('letter_of_thanks','student__name','student__pic','student__company','student__salary')

    return render(request,'home.html',{'queryset_dict':queryset_dict})

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

<div style="width: 245px;float: left">

    {% for item in queryset_dict %}

        ....

    {% endfor %}

</div>

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

完整代码:

from django import template

from django.utils.safestring import mark_safe

register = template.Library()

@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 ''

自定义模版语言

{% load newtag %}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .clearfix:after{

            content: 'x';

            height: 0;

            visibility: hidden;

            clear: both;

            display: block;

        }

        .stu{

            margin:0 auto;

            width: 980px;

        }

    </style>

</head>

<body>

    <div class="clearfix stu">

        <div style="width: 245px;float: left">

            {% for item in queryset_dict %}

                {% image_show item forloop.counter 4 1 %}

            {% endfor %}

        </div>

        <div style="width: 245px;float: left">

            {% for item in queryset_dict %}

                {% image_show item forloop.counter 4 2 %}

            {% endfor %}

        </div>

        <div style="width: 245px;float: left">

            {% for item in queryset_dict %}

                {% image_show item forloop.counter 4 3 %}

            {% endfor %}

        </div>

        <div style="width: 245px;float: left">

            {% for item in queryset_dict %}

                {% image_show item forloop.counter 4 0 %}

            {% endfor %}

        </div>

    </div>

</body>

</html>

前端页面

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

注意: img标签的 src 地址斜杠 /

实现方式三: JQ中Ajax实现

设计思路:

1.访问页面,

2.自动发送ajax请求

3.ajax获取数据

4.求余判断,生成标签.页面添加标签

实现方法:

1.后台判断,Ajax发送的POST请求, => 数据库查询获取数据,

def student1(request):

    if request.method == 'POST':

        queryset_dict = models.StudentDetail.objects.filter(student__status=1).values('letter_of_thanks',

                                                                                      'student__name', 'student__pic',

                                                                                      'student__company',

                                                                                      'student__salary')

        queryset_list = list(queryset_dict)

        return HttpResponse(json.dumps(queryset_list))

    else:

        return render(request,'student.html')

注意: 后台获取的数据形式为 QuerySet[{数据1},{数据2}] , 需要先转换成列表形式再json.dumps()

2.json返回前端.

3.前端JQ创建标签,填充数据,把标签添加到div1,div2,...上

$.each(data,function (k,v) {

    k = k + 1;

    var div = document.createElement('div');

    div.className ='item';

    var img = document.createElement('img');

    img.src='/'+v.student__pic;

    var p1 = document.createElement('p');

    p1.innerText = v.letter_of_thanks;

    div.appendChild(img);

    div.appendChild(p1);

    if(k%4 == 1){

        $('#container').children(':eq(0)').append(div);

    }else if(k%4 == 2){

        $('#container').children(':eq(1)').append(div);

    }else if(k%4 == 3){

        $('#container').children(':eq(2)').append(div);

    }else if(k%4 == 0){

        $('#container').children(':eq(3)').append(div);

    }else {

        console.log('error')

    }

})

完整代码:

from django.shortcuts import render,HttpResponse

import json

# Create your views here.

from app01 import models

def student1(request):

    if request.method == 'POST':

        queryset_dict = models.StudentDetail.objects.filter(student__status=1).values('letter_of_thanks',

                                                                                      'student__name', 'student__pic',

                                                                                      'student__company',

                                                                                      'student__salary')

        queryset_list = list(queryset_dict)

        return HttpResponse(json.dumps(queryset_list))

    else:

        return render(request,'student.html')

后台代码

{% load newtag %}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .clearfix:after{

            content: 'x';

            height: 0;

            visibility: hidden;

            clear: both;

            display: block;

        }

        .stu{

            margin:0 auto;

            width: 980px;

        }

        .item{

            width:245px;

        }

        .item img{

            width: 245px;

            height: 250px;

        }

    </style>

</head>

<body>

    <div class="clearfix stu" id="container">

        <div style="width: 245px;float: left">

        </div>

        <div style="width: 245px;float: left">

        </div>

        <div style="width: 245px;float: left">

        </div>

        <div style="width: 245px;float: left">

        </div>

    </div>

    <script src="/static/js/jquery-2.1.4.min.js"></script>

    <script>

        $(function () {

            $.ajax({

                url:'/student1/',

                type:'POST',

                dataType:'json',

                success:function (data) {

                    console.log('ok');

                    console.log(data);

                    $.each(data,function (k,v) {

                        k = k + 1;

                        var div = document.createElement('div');

                        div.className ='item';

                        var img = document.createElement('img');

                        img.src='/'+v.student__pic;

                        var p1 = document.createElement('p');

                        var p2 = document.createElement('p');

                        p1.innerText = v.student__name;

                        p2.innerText = v.letter_of_thanks;

                        div.appendChild(img);

                        div.appendChild(p1);

                        div.appendChild(p2);

                        console.log(div);

                        if(k%4 == 1){

                            $('#container').children(':eq(0)').append(div);

                        }else if(k%4 == 2){

                            $('#container').children(':eq(1)').append(div);

                        }else if(k%4 == 3){

                            $('#container').children(':eq(2)').append(div);

                        }else if(k%4 == 0){

                            $('#container').children(':eq(3)').append(div);

                        }else {

                            console.log('error')

                        }

                    })

                }

            })

        })

    </script>

</body>

</html>

前端页面

【Python之路】特别篇--Django瀑布流实现的更多相关文章

【Python之路】特别篇--Django生产环境部署
Django的部署可以有很多方式,采用nginx+uwsgi的方式是其中比较常见的一种方式. uWSGI uWSGI是一个Web服务器,它实现了WSGI协议.uwsgi.http等协议.Nginx中H ...
python之路基础篇
基础篇 1.Python基础之初识python 2.Python数据类型之字符串 3.Python数据类型之列表 4.Python数据类型之元祖 5.Python数据类型之字典 6.Python Se ...
python之路入门篇
一. Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,Guido开始写能够解释Python语言语法的解释器.Python这个名字,来 ...
python之路——基础篇（2）模块
模块:os.sys.time.logging.json/pickle.hashlib.random.re 模块分为三种: 自定义模块第三方模块内置模块自定义模块 1.定义模块将一系列功能函数或 ...
python之路第一篇
一.python环境的搭建 1.window下环境的搭建 (1).在 https://www.python.org/downloads/ 下载自己系统所需要的python版本 (2).安装python ...
python之路第二篇（基础篇）
入门知识: 一.关于作用域: 对于变量的作用域,执行声明并在内存中存在,该变量就可以在下面的代码中使用. if 10 == 10: name = 'allen' print name 以下结论对吗? ...
Python之路(第九篇)Python文件操作
一.文件的操作文件句柄 = open('文件路径+文件名', '模式') 例子 f = open("test.txt","r",encoding = “utf ...
Python之路(第二篇)：Python基本数据类型字符串（一）
一.基础 1.编码 UTF-8:中文占3个字节 GBK:中文占2个字节 Unicode.UTF-8.GBK三者关系 ascii码是只能表示英文字符,用8个字节表示英文,unicode是统一码,世界通用 ...
Python之路(第一篇)：Python简介和基础
一.开发简介 1.开发: 开发语言: 高级语言:python.JAVA.PHP.C#..ruby.Go-->字节码低级语言: ...

随机推荐

java中讲讲PrintStream的用法，举例？
[学习笔记] 1.2 PrintStream的用法从学java第一天,我们就经常用到System.out.println(),实际上查阅文档可知,System.out就是Sun 编的一个Prin ...
LeetCode 第 165 场周赛
LeetCode 第 165 场周赛 5275. 找出井字棋的获胜者 5276. 不浪费原料的汉堡制作方案 5277. 统计全为 1 的正方形子矩阵 5278. 分割回文串 III C 暴力做的,只能 ...
【AtCoder】AGC034
AGC034 刷了那么久AtCoder我发现自己还是只会ABCE(手动再见 A - Kenken Race 大意是一个横列,每个点可以跳一步或者跳两步,每个格子是空地或者石头,要求每一步不能走到石头或 ...
【AtCoder】CODE FESTIVAL 2016 qual C
CODE FESTIVAL 2016 qual C A - CF -- #include <bits/stdc++.h> #define fi first #define se secon ...
如何拿到美团offer的
美团,我是在拉勾网上投的简历,之前也投过一次,简历都没通过删选,后来让学姐帮我改了一下简历,重新投另一个部门,获得了面试机会.10月23日,中午HR打电话过来预约了下午4点半面试,说会在线写代码,让我 ...
【2019NOIP复习计划】
(其实不应该这么叫的,应该是CSP-S了现在..) 重点关注的板子: 不知道为什么特别受出题人青睐的LCA(板子点这里) 配套练习:(紫题请自便) (这题蓝的应该可以试试) (对的这题也紫它还是道 ...
Idea加载项目扫描完毕后自动退出
问题描述:Idea平时好好的,突然就打开后扫描完毕后自动退出.网上说修改idea.exe.vmoptions文件的Xmx,还是不行. 后来根据http://www.pianshen.com/artic ...
NSInvocation简单总结
(1)用法 NSInvocation是调用函数的另一种方式,它将调用者,函数名,参数封装到一个对象,然后通过一个invoke函数来执行被调用的函数,其思想就是命令者模式,将请求封装成对象. 例如,有这 ...
VBA基本用法
Visual Basic for Applications 宏语言打开VB编辑器首先打开Excel,组合键Alt+F11 加载宏找到相应的宏,点击"执行" 举例 Sub 评分 ...
JS__POST
RSA加密熟悉的东西 public key Encrypt (函数) 而且每次刷新都会变化() 一般 128 位,也有 256位的

【Python之路】特别篇--Django瀑布流实现

瀑布流

【Python之路】特别篇--Django瀑布流实现的更多相关文章

随机推荐

热门专题