【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-->字节码低级语言: ...

随机推荐

Dijkstra算法——超~~详细！！
Dijkstra算法_ ** 时隔多月,我又回来了!**_ 今天下午久违的又学了会儿算法,又重新学习了一遍Dijkstra,这是第三次重新学习Dijkstra(*以前学的都忘完了>_<*) ...
Go语言学习之斐波那契数列的测试例子和定义常量方法
### Go语言学习之斐波那契数列的测试例子和定义常量方法 1.go语言中测试文件必须以test.go结尾,比如:fib_test.go 2.测试文件内的方法必须是Test开头,比如:func Tes ...
Python第三方库资源
[转载]Python第三方库资源转自:https://weibo.com/ttarticle/p/show?id=2309404129469920071093 参考:https://github ...
Python运算符和编码
Python运算符和编码一.格式化输出现在有以下需求,让⽤户输入name, age, job,hobby 然后输出如下所⽰: ----------info of dogfa---------- n ...
python爬取信息并保存至csv
import csv import requests from bs4 import BeautifulSoup res=requests.get('http://books.toscrape.com ...
在生产环境中使用Compose 【翻译】
在生产环境中使用Compose 在开发环境中使用Compose定义你的应用,可以使用此定义在不同的环境,(如 CI.暂存和生产)中运行应用程序. 部署应用程序的最简单方法是在单个服务器上运行该应用程序 ...
Windows编程鼠标
客户区鼠标消息由上一回我们得知Windows只把键盘消息发送给拥有输入焦点的窗口,而鼠标消息与此不同:只要鼠标跨越窗口或者在某窗口下按下鼠标键,那么窗口过程就会收到鼠标消息,不管该窗口是否活动或者是 ...
网络编程之NIO
传统的BIO(Blocking IO)的缺点: 1.基于阻塞式IO建立起来的,导致服务端一直阻塞等待着客户端发起请求,如果客户端不发起,服务端的的业务线程会一直存. 2.弹性伸缩能力差,线程数和客户端 ...
js重点——作用域——作用域分类(三)
一.作用域可以分为全局作用域,局部作用域(函数作用域)和块级作用域. 1.全局作用域代码在程序中的任何位置都能被访问到,window对象的内置属性都拥有全局作用域. <script> v ...
tensorflow保存数据为.ｐｂ格式和加载ｐｂ文件
转自:https://blog.csdn.net/u014264373/article/details/79943389 https://blog.csdn.net/fu6543210/article ...

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

瀑布流

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

随机推荐

热门专题