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. 云计算openstack共享组件（3）——消息队列rabbitmq

    队列(MQ)概念: MQ 全称为 Message Queue, 消息队列( MQ ) 是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链 ...

  2. vue脚手架搭建项目引用百度地图--出坑

    这是官网地址 https://dafrok.github.io/vue-baidu-map/#/zh/start/installation 需要声明注意的是 BaiduMap 组件容器本身是一个空的块 ...

  3. deb包转化为rpm包

    deb文件格式本是ubuntu的安装文件,那么我想要在fedora中安装,需要把deb格式转化成rpm格式,我们用skype举例: 1.下载转换工具alien_8.78.tar.gz 2.deb转化成 ...

  4. 利用Python中SocketServer 实现客户端与服务器间非阻塞通信

    利用SocketServer模块来实现网络客户端与服务器并发连接非阻塞通信 版权声明 本文转自:http://blog.csdn.net/cnmilan/article/details/9664823 ...

  5. CentOS7下解决yum install mysql-server 异常：No package mysql-server available.问题

    yum安装mysql-server没有可用包问题解决方法: step 1: wget http://repo.mysql.com/mysql-community-release-el7-5.noarc ...

  6. python+opencv读取视频，调用摄像头

    引用 import cv2 import numpy 创建摄像头对象 cap = cv2.VideoCapture("videoTest/test1.mp4") #参数为视频文件目 ...

  7. SpringCloud学习笔记：熔断器Hystrix（5）

    1. Hystrix简介 在分布式系统中,服务与服务之间相互依赖,一种不可避免的情况是某些服务会出现故障,导致依赖于它们的其他服务出现远程调度的线程阻塞. Hystrix提供熔断器功能,能够阻止分布式 ...

  8. sql中的 IF 条件语句的用法

    IF 表达式 IF( expr1 , expr2 , expr3 ) expr1 的值为 TRUE,则返回值为 expr2 expr1 的值为FALSE,则返回值为 expr3 如下: SELECT ...

  9. bzoj 1208: [HNOI2004]宠物收养所 (Treap）

    链接:  https://www.lydsy.com/JudgeOnline/problem.php?id=1208 题面: 1208: [HNOI2004]宠物收养所 Time Limit: 10 ...

  10. Java8之方法引用

    一.概述 在学习lambda表达式之后,我们通常使用lambda表达式来创建匿名方法.然而,有时候我们仅仅是调用了一个已存在的方法.如下: Arrays.sort(stringsArray,(s1,s ...