1.通过ajax方式实现滚动条瀑布流
(1)创建数据库:xixi\pubu\models.py

from django.db import models

#Img图片表

class Img(models.Model):

    src = models.FileField(max_length=32,verbose_name='图片路径',upload_to='static/upload')        #FileField上传文件，upload_to指定上传路径

    title = models.CharField(max_length=16,verbose_name='标题')

    summary = models.CharField(max_length=128,verbose_name='简介')

    class Meta:

        verbose_name_plural = '图片'

    def __str__(self):

        return self.title

数据库：

+----------------------------+

| Tables_in_xi               |

+----------------------------+

| auth_group                 |

| auth_group_permissions     |

| auth_permission            |

| auth_user                  |

| auth_user_groups           |

| auth_user_user_permissions |

| django_admin_log           |

| django_content_type        |

| django_migrations          |

| django_session             |

| pubu_img                   |

+----------------------------+

图片表：pubu_img

+----+---------------------------------+--------------+-----------------+

| id | src                             | title        | summary         |

+----+---------------------------------+--------------+-----------------+

|  1 | static/upload/1_1610.JPG        | 西瓜         | 夏天必备        |

|  2 | static/upload/1_336_o8hpAYb.JPG | 梨           | 润嗓子          |

|  3 | static/upload/1_438.JPG         | 白雪         | 一只喵          |

|  4 | static/upload/1_1164.JPG        | 饺子         | 好吃            |

|  5 | static/upload/1_193_t8jcwXm.JPG | 皮卡丘       | 宠物小精灵      |

|  6 | static/upload/1_1202.JPG        | 不二         | 一本书          |

|  7 | static/upload/1_350.JPG         | 油焖大虾     | 一道菜          |

+----+---------------------------------+--------------+-----------------+

(2)URL：E:\python\xixi\xixi\urls.py

from django.conf.urls import url

from django.contrib import admin

from pubu import views

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^imgs.html$', views.imgs),                 #照片页面显示

    url(r'^get_imgs.html$', views.get_imgs),         #获取照片

]

(3)视图函数：xixi\zuhe\views.py

from django.shortcuts import render

from pubu import models

from django.http import JsonResponse                                            #JsonResponse内部会执行Json.dumps

def imgs(request):                                                              #照片页面显示函数

    return render(request,'img.html')

def get_imgs(request):                                                            #获取照片函数

    nid = request.GET.get('nid')                                                  #获取到nid

    img_list = models.Img.objects.filter(id__gt=nid).values('id','src','title')   #按照上次取到的nid开始往下取，给用户返回json数据包括(id,src,title)

    img_list = list(img_list)                                                     #

    ret = {

        'status': True,

        'data': img_list

    }

    return JsonResponse(ret)                                                      #返回到前端

(4)页面：xixi\templates\img.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .w{

            width: 1000px;

            margin: 0 auto;

        }

        .item{

            width: 25%;              {#每一个照片宽度占百分之25#}

            float: left;

        }

        .item img{

            width: 100%;

        }

    </style>

</head>

<body>

    <div class="w" id="container">  {#设置4个div，每一个div占一列，一排占4张照片#}

        <div class="item">          {#循环的第一张#}     {#循环的第五张#}

        </div>

        <div class="item">          {#循环的第二张#}     {#循环的第六张#}

        </div>

        <div class="item">          {#循环的第三张#}      {#循环的第七张#}

        </div>

        <div class="item">          {#循环的第四张#}      {#循环的第八张#}

        </div>

    </div>

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

    <script>

        $(function () {

            var obj = new ScrollImg();                                  //通过new调用ScrollImg类里的function()函数，this=obj(NID和LASTPOSITION)

            obj.fetchImg();                                             //调用fetchImg()函数，这个函数里的this=obj(NID和LASTPOSITION)

            obj.scrollEvent();                                          //调用滚轮scrollEvent()函数

        });

        function ScrollImg() {                                          //第一步：当初次加载时候执行ScrollImg()

            this.NID = 0;                                               //NID记录每次读到照片的数量显示出来：默认是0

            this.LASTPOSITION = 3;                                      //每次循环最后的位置：默认是3

            this.fetchImg = function () {                               //调用fetchIm

                var that = this;                                        //将当前的this对象复制一份到that变量中

                $.ajax({                                                //通过ajax把照片获取到

                url: '/get_imgs.html',

                type: 'GET',

                data:{nid:that.NID},                                    //把NID传到后端

                dataType: 'JSON',

                success:function (arg) {                                //arg是整个后端传来的内容

                    var img_list = arg.data;                            //arg.data是列表,,赋值给img_list=[{"src":"static/upload/1_336_o8hpAYb.JPG","title":"梨","id":2},{},{}]

                    $.each(img_list,function (index,v) {                //对img_list循环的里面每一个元素是一个一个的字典  img_list(index是索引0,v是img_list=[{"src":"static/upload/1_336_o8hpAYb.JPG","title":"梨","id":2},{},{}])

                        var eqv = (index + that.LASTPOSITION + 1) % 4;  //求余(index(1)+that.LASTPOSITION(3)+1)/4余0的顺序赋值给eqv

                        //console.log(eqv);

                        var tag = document.createElement('img');        //生成img标签赋值给tag：<img src="">

                        tag.src = '/'+ v.src;                           //生成整体tag标签，v.src是图片路径：<img src="static/upload/1_336_o8hpAYb.JPG">

                        $('#container').children().eq(eqv).append(tag); //找container下面的孩子4个div通过eqv 0 1 2 3的顺序把创建的tag标签放进去

                        //当循环最后一张图片时，将图片的ID赋值给NID

                        if (index + 1 == img_list.length) {             //索引加一等于长度的时候

                            that.LASTPOSITION = eqv;                    //记录每次循环最后一次位置

                            that.NID = v.id;                            //v.id是2

                        }

                    })

                }

                })

            };

            this.scrollEvent = function () {                            //调用scrollEvent

                //当滚轮达到最底部时，从新执行initImg函数()

                var that = this;                                       //将当前的this对象复制一份到that变量中

                $(window).scroll(function () {                         //绑定事件

                    //什么时候达到最底部？

                    //文档高度(body占多高)

                    //窗口高度(内容站多高)

                    //窗口高度和文档高度差的是滚动条可滑动的高度

                    //窗口高度+滚轮滑动的高度=文档高度就是到达最底部了

                    var scrollTop = $(window).scrollTop();             //滑轮滚动的高度

                    var winHeight = $(window).height();                //获取窗口高度

                    var docHeight = $(document).height();              //获取文档高度

                    if (scrollTop + winHeight == docHeight) {          //如果窗口高度+滚轮滑动的高度=文档高度就是到达最底部了

                        //console.log(1);

                        that.fetchImg();

                    }

                })

            }

        }

    </script>

</body>

</html>

访问：http://127.0.0.1:8080/imgs.html

Django-瀑布流的更多相关文章

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

    瀑布流 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinteres ...

  2. Django实现瀑布流，组合搜索

    Django中组合搜索功能 需求分析 很多电商网站中有组合搜索的功能,所谓组合搜索就是网页中组合多个条件,对数据库中进行查询,并且将结果显示在页面中,看个例子吧: 注意红框中的标识,我们可以根据URL ...

  3. JavaScript中作用域回顾（避免使用全局变量）（瀑布流的实现）（scroll事件）以及Django自定义模板函数回顾

    页面显示照片样式为瀑布流: 上面的div个数可以按照自己安排进行划分.img的分布可以使用模板标签以及自定义模板函数进行排布: 自定义模板函数实现可以看,最后几列:python---django中模板 ...

  4. django实现瀑布流、组合搜索、阶梯评论、验证码

    django实现图片瀑布流布局 我们在一些图片网站上经常会看到,满屏都是图片,而且图片都大小不一,却可以按空间排列.默认一个div是占用一行,当想把div里的图片并排显示的时候,只能使用float属性 ...

  5. Django模板语言中的自定义方法filter过滤器实现web网页的瀑布流

    模板语言自定义方法介绍 自定义方法注意事项 Django中有simple_tag 和 filter 两种自定义方法,之前也提到过,需要注意的是 扩展目录名称必须是templatetags templa ...

  6. Django之瀑布流

    一. 小功能瀑布流的实现 1.完成效果图 2.代码部分 <1>models.py from django.db import models # Create your models her ...

  7. Django 之瀑布流实现

    需求分析 现在是 "图片为王"的时代,在浏览一些网站时,经常会看到类似于这种满屏都是图片.图片大小不一,却按空间排列,就这是瀑布流布局. 以瀑布流形式布局,从数据库中取出图片 每次 ...

  8. 轮播组件/瀑布流/组合搜索/KindEditor插件

    一.企业官网 ### 瀑布流 ​ Models.Student.objects.all() #获取所有学员信息 ​ 通过div进行循环图片和字幕 ​ 1.以template模板方法实现瀑布流以列为单位 ...

  9. jquery瀑布流的制作

    首先,还是来看一下炫酷的页面: 今天就边做边说了: 一.准备工作 新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述 ...

  10. js瀑布流 原理实现揭秘 javascript 原生实现

    web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...

随机推荐

  1. set 数据类型

    list => 允许重复的集合,可修改 tuple => 允许重复的集合,不可修改 dict set => 不允许重复的集合 .set 不允许重复的列表 1.创建 s = set() ...

  2. Python——collections模块（扩展数据类型）

    1.namedtuple:利用坐标.空间坐标,扑克牌等指定空间位置 # namedtuple('名字',[list列表属性])from collections import namedtuple Po ...

  3. vue2.0实现过滤

    vue1.0和vue2.0差别还是挺多的,之前的vue1.0还有过滤器功能,到了2.0过滤器只能通过自己编写.以下是写的一个小demo: HTML <div id="app" ...

  4. Eclipse maven hadoop -- java.io.IOException: No FileSystem for scheme: hdfs

    2019-01-10 概述 今天在Windows系统下新安装了Eclipse和maven的环境,想利用Maven构建一个Hadoop程序的,结果却发现程序运行时一直报 “No FileSystem f ...

  5. Mdoelsim10.4怎么脚本单独仿真ISE14.7 IP核

    软件版本: Modelsim10.4SE ISE14.7 仿真IP:时钟管理IP(clock wizard)   流程: 1.对于Modelsim10.4SE,并不自带Xilinx家的仿真库,因此首先 ...

  6. Django 路由系统

    Django 路由系统 基本格式 from django.conf.urls import url urlpatterns = [ url(正则表达式, views视图函数,参数,别名), ] 参数说 ...

  7. Java【第三篇】基本语法之--选择结构

    Java分支语句分类 分支语句根据一定的条件有选择地执行或跳过特定的语句,分为两类: if-else 语句 switch 语句 if-else语句语法格式 if(布尔表达式){ 语句或语句块; } i ...

  8. Meterpreter提权详解

      0x01 Meterpreter自动提权 1.生成后门程序 我们在kali的命令行下直接执行以下命令获得一个针对windows的反弹型木马: msfvenom -p windows/meterpr ...

  9. 深入理解JVM(4)——对象的创建和访问

    1.对象的创建 在语言层面上,创建对象(例如克隆,反序列化)通常仅仅是一个new关键字而已. 在虚拟机中,对象(文中讨论的对象限于普通 Java 对象,不包括数组和 Class 对象等)的创建过程如下 ...

  10. 如何修改hosts文件

     如何修改hosts文件 1.进入路径 C:\Windows\System32\drivers\etc 2.拷贝hosts文件到其他地方3.修改拷贝的hosts文件,右键用记事本打开4.直接修改或添加 ...