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

  1. from django.db import models
  2. #Img图片表
  3. class Img(models.Model):
  4.  
  5.     src = models.FileField(max_length=32,verbose_name='图片路径',upload_to='static/upload')        #FileField上传文件，upload_to指定上传路径
  6.     title = models.CharField(max_length=16,verbose_name='标题')
  7.     summary = models.CharField(max_length=128,verbose_name='简介')
  8.  
  9.     class Meta:
  10.         verbose_name_plural = '图片'
  11.     def __str__(self):
  12.         return self.title

数据库：

  1. +----------------------------+
  2. | Tables_in_xi               |
  3. +----------------------------+
  4. | auth_group                 |
  5. | auth_group_permissions     |
  6. | auth_permission            |
  7. | auth_user                  |
  8. | auth_user_groups           |
  9. | auth_user_user_permissions |
  10. | django_admin_log           |
  11. | django_content_type        |
  12. | django_migrations          |
  13. | django_session             |
  14. | pubu_img                   |
  15. +----------------------------+

图片表：pubu_img

  1. +----+---------------------------------+--------------+-----------------+
  2. | id | src                             | title        | summary         |
  3. +----+---------------------------------+--------------+-----------------+
  4. |  1 | static/upload/1_1610.JPG        | 西瓜         | 夏天必备        |
  5. |  2 | static/upload/1_336_o8hpAYb.JPG | 梨           | 润嗓子          |
  6. |  3 | static/upload/1_438.JPG         | 白雪         | 一只喵          |
  7. |  4 | static/upload/1_1164.JPG        | 饺子         | 好吃            |
  8. |  5 | static/upload/1_193_t8jcwXm.JPG | 皮卡丘       | 宠物小精灵      |
  9. |  6 | static/upload/1_1202.JPG        | 不二         | 一本书          |
  10. |  7 | static/upload/1_350.JPG         | 油焖大虾     | 一道菜          |
  11. +----+---------------------------------+--------------+-----------------+

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

  1. from django.conf.urls import url
  2. from django.contrib import admin
  3. from pubu import views
  4. urlpatterns = [
  5.     url(r'^admin/', admin.site.urls),
  6.     url(r'^imgs.html$', views.imgs),                 #照片页面显示
  7.     url(r'^get_imgs.html$', views.get_imgs),         #获取照片
  8. ]

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

  1. from django.shortcuts import render
  2. from pubu import models
  3. from django.http import JsonResponse                                            #JsonResponse内部会执行Json.dumps
  4. def imgs(request):                                                              #照片页面显示函数
  5.     return render(request,'img.html')
  6.  
  7. def get_imgs(request):                                                            #获取照片函数
  8.     nid = request.GET.get('nid')                                                  #获取到nid
  9.     img_list = models.Img.objects.filter(id__gt=nid).values('id','src','title')   #按照上次取到的nid开始往下取，给用户返回json数据包括(id,src,title)
  10.     img_list = list(img_list)                                                     #
  11.     ret = {
  12.         'status': True,
  13.         'data': img_list
  14.     }
  15.     return JsonResponse(ret)                                                      #返回到前端

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .w{
  8.             width: 1000px;
  9.             margin: 0 auto;
  10.         }
  11.         .item{
  12.             width: 25%;              {#每一个照片宽度占百分之25#}
  13.             float: left;
  14.         }
  15.         .item img{
  16.             width: 100%;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div class="w" id="container">  {#设置4个div，每一个div占一列，一排占4张照片#}
  22.  
  23.         <div class="item">          {#循环的第一张#}     {#循环的第五张#}
  24.         </div>
  25.  
  26.         <div class="item">          {#循环的第二张#}     {#循环的第六张#}
  27.         </div>
  28.  
  29.         <div class="item">          {#循环的第三张#}      {#循环的第七张#}
  30.         </div>
  31.  
  32.         <div class="item">          {#循环的第四张#}      {#循环的第八张#}
  33.         </div>
  34.  
  35.     </div>
  36.     <script src="/static/jquery-1.12.4.js"></script>
  37.     <script>
  38.         $(function () {
  39.             var obj = new ScrollImg();                                  //通过new调用ScrollImg类里的function()函数，this=obj(NID和LASTPOSITION)
  40.             obj.fetchImg();                                             //调用fetchImg()函数，这个函数里的this=obj(NID和LASTPOSITION)
  41.             obj.scrollEvent();                                          //调用滚轮scrollEvent()函数
  42.         });
  43.  
  44.         function ScrollImg() {                                          //第一步：当初次加载时候执行ScrollImg()
  45.             this.NID = 0;                                               //NID记录每次读到照片的数量显示出来：默认是0
  46.             this.LASTPOSITION = 3;                                      //每次循环最后的位置：默认是3
  47.             this.fetchImg = function () {                               //调用fetchIm
  48.                 var that = this;                                        //将当前的this对象复制一份到that变量中
  49.                 $.ajax({                                                //通过ajax把照片获取到
  50.                 url: '/get_imgs.html',
  51.                 type: 'GET',
  52.                 data:{nid:that.NID},                                    //把NID传到后端
  53.                 dataType: 'JSON',
  54.                 success:function (arg) {                                //arg是整个后端传来的内容
  55.                     var img_list = arg.data;                            //arg.data是列表,,赋值给img_list=[{"src":"static/upload/1_336_o8hpAYb.JPG","title":"梨","id":2},{},{}]
  56.                     $.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},{},{}])
  57.                         var eqv = (index + that.LASTPOSITION + 1) % 4;  //求余(index(1)+that.LASTPOSITION(3)+1)/4余0的顺序赋值给eqv
  58.                         //console.log(eqv);
  59.                         var tag = document.createElement('img');        //生成img标签赋值给tag：<img src="">
  60.                         tag.src = '/'+ v.src;                           //生成整体tag标签，v.src是图片路径：<img src="static/upload/1_336_o8hpAYb.JPG">
  61.                         $('#container').children().eq(eqv).append(tag); //找container下面的孩子4个div通过eqv 0 1 2 3的顺序把创建的tag标签放进去
  62.                         //当循环最后一张图片时，将图片的ID赋值给NID
  63.                         if (index + 1 == img_list.length) {             //索引加一等于长度的时候
  64.                             that.LASTPOSITION = eqv;                    //记录每次循环最后一次位置
  65.                             that.NID = v.id;                            //v.id是2
  66.                         }
  67.                     })
  68.                 }
  69.                 })
  70.             };
  71.             this.scrollEvent = function () {                            //调用scrollEvent
  72.                 //当滚轮达到最底部时，从新执行initImg函数()
  73.                 var that = this;                                       //将当前的this对象复制一份到that变量中
  74.                 $(window).scroll(function () {                         //绑定事件
  75.                     //什么时候达到最底部？
  76.                     //文档高度(body占多高)
  77.                     //窗口高度(内容站多高)
  78.                     //窗口高度和文档高度差的是滚动条可滑动的高度
  79.                     //窗口高度+滚轮滑动的高度=文档高度就是到达最底部了
  80.                     var scrollTop = $(window).scrollTop();             //滑轮滚动的高度
  81.                     var winHeight = $(window).height();                //获取窗口高度
  82.                     var docHeight = $(document).height();              //获取文档高度
  83.                     if (scrollTop + winHeight == docHeight) {          //如果窗口高度+滚轮滑动的高度=文档高度就是到达最底部了
  84.                         //console.log(1);
  85.                         that.fetchImg();
  86.                     }
  87.                 })
  88.             }
  89.         }
  90.     </script>
  91. </body>
  92. </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. 使用.net core efcore根据数据库结构自动生成实体类

    源码 github,已更新最新代码 https://github.com/leoparddne/GenEntities/ 使用的DB是mysql,所有先nuget一下mysql.data 创建t4模板 ...

  2. PHP中高级进阶之路

    纯自己总结,认为作为一个中高级的PHP程序员,应该必修的内容,以此鞭策自己,努力向着这个方向前进. 1. 技能自问 1) PHP7开始使用了吗?它的一些新特性? 2) 数据库分库分表的实现 3) My ...

  3. MySQL中的float和decimal类型有什么区别

    decimal 类型可以精确地表示非常大或非常精确的小数.大至 1028(正或负)以及有效位数多达 28 位的数字可以作为 decimal类型存储而不失其精确性.该类型对于必须避免舍入错误的应用程序( ...

  4. VUE实例方法添加、COOKIE、Token

    创建COOKIE const COOKIE = { KEY_TOKEN: 'access_token', KEY_USER: 'nbuser', KEY_PERMISSION: 'nb-permiss ...

  5. luogu2597-[ZJOI2012]灾难 && DAG支配树

    Description P2597 [ZJOI2012]灾难 - 洛谷 | 计算机科学教育新生态 Solution 根据题意建图, 新建一个 \(S\) 点, 连向每个没有入边的点. 定义每个点 \( ...

  6. [洛谷P2107] 小Z的AK计划

    题目类型:贪心,堆 传送门:>Here< 题意:给出\(N\)个房间,每个房间距离起点的距离为\(x[i]\),每个房间可以选择进去和不进去,如果进去了那么要\(t[i]\)秒后才能出来. ...

  7. 【并发编程】【JDK源码】CAS与synchronized

    线程安全 众所周知,Java是多线程的.但是,Java对多线程的支持其实是一把双刃剑.一旦涉及到多个线程操作共享资源的情况时,处理不好就可能产生线程安全问题.线程安全性可能是非常复杂的,在没有充足的同 ...

  8. 用SERVLET进行用户名和密码验证

    一.界面展示 二.登录成功显示 三.代码 html <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  9. Go语言系列（三）- 基础函数和流程控制

    一.strings和strconv的使用 1. strings.HasPrefix(s string, prefix string) bool:判断字符串s是否以prefix开头 . 2. strin ...

  10. Encryption and decryption、Steganography、Decryption Tools

    catalogue . 隐写术 . Substitution cipher . Transposition cipher . Bacon's cipher . LSB-Steganography 1. ...