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. 【alpha阶段】第一次Scrum Meeting

    每日任务内容 队员 昨日完成任务 明日要完成的任务 牛宇航 #2 数据库重构https://github.com/rRetr0Git/rateMyCourse/issues/2 #8 后端函数修正及重 ...

  2. Centos7 利用crontab定时执行任务及配置方法

    crond是什么? crond 和crontab是不可分割的.crontab是一个命令,常见于Unix和类Unix的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于 ...

  3. mybatis 使用auto mapping原理实现表间关联

    Auto mapping的示例 数据库中有一个person表,结构如下: mysql> desc person; +-------+-------------+------+-----+---- ...

  4. Callable，Future和FutureTask详解

    1.Callable和Runnable 看Callable接口: public interface Callable<V> { /** * Computes a result, or th ...

  5. IIS部署ASP.Net Core 502.5错误和解决

    在Win7的机器上部署ASP.Net Core程序,老是提示502.5错误. 已经安装了 Microsoft Visual C++ 2015 Redistributable .NET Core Win ...

  6. Nginx ServerName指令

    L:47

  7. 倍增\ tarjan求lca

    对于每个节点v,记录anc[v][k],表示从它向上走2k步后到达的节点(如果越过了根节点,那么anc[v][k]就是根节点). dfs函数对树进行的dfs,先求出anc[v][0],再利用anc[v ...

  8. 探索 Python 学习

    Python 是一种敏捷的.动态类型化的.极富表现力的开源编程语言,可以被自由地安装到多种平台上(参阅 参考资料).Python 代码是被解释的.如果您对编辑.构建和执行循环较为熟悉,则 Python ...

  9. CentOS7 Zabbix3.4安装

    依赖于lnmp或者lamp环境: 1.下载源码包 # wget -O zabbix-3.4.2.tar.gz http://sourceforge.net/projects/zabbix/files/ ...

  10. （转）Spring事务管理详解

    背景:之前一直在学习数据库中的相关事务,而忽略了spring中的事务配置,在阿里面试时候基本是惨败,这里做一个总结. 可能是最漂亮的Spring事务管理详解 https://github.com/Sn ...