前端内容：

使用JavaScript和四个div，将照片放入四个div中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .container {
  8.             width: 1000px;
  9.             margin: 0 auto;
  10.             background-color: lightgray;
  11.         }
  12.  
  13.         .item {
  14.             width: 24%;
  15.             margin-right: 10px;
  16.             float: left;
  17.         }
  18.         .item img{
  19.             width: 100%;
  20.         }
  21.  
  22.     </style>
  23. </head>
  24. <body>
  25. {#将内容放在container中#}
  26. <div class="container">
  27. {#    将图片内容放入四个item中，形成四个item#}
  28.     <div class="item"></div>
  29.     <div class="item"></div>
  30.     <div class="item"></div>
  31.     <div class="item"></div>
  32.  
  33. </div>
  34. <script src="/static/js/jquery-2.1.4.min.js"></script>
  35. <script>
  36.     $(function () {
  37. {#        网页加载时自动执行#}
  38.         var obj = new ScrollImg();
  39.         obj.fetchImg();
  40.         obj.scrollEvent();
  41.     })
  42.  
  43. {#    定义对象#}
  44.     function ScrollImg() {
  45.         this.nid = 0;
  46. {#        取照片方法#}
  47.         this.fetchImg = function () {
  48.             var that = this
  49.             $.ajax({
  50.                 url: '/get_imgs.html',
  51.                 type: 'GET',
  52. {#        传输数据，已经取了多少照片，后台可以依据，继续取照片#}
  53.                 data: {'nid': that.nid},
  54.                 dataType: 'JSON',
  55.                 success: function (args) {
  56.                     if (args.status) {
  57.                         var img_list = args.data;
  58.                         $.each(img_list, function (index, obj) {
  59.                             var eqv = that.nid % 4;
  60.                             var tag = document.createElement('img')
  61.                             tag.src = '/' + obj.img_dir;
  62.                             console.log(eqv)
  63.                             $('.container').children().eq(eqv).append(tag)
  64.                             that.nid += 1;
  65.                         })
  66.                     }
  67.                 }
  68.             })
  69.         }
  70. {#        监听滚动条，当滚到底部时，自动加载数据#}
  71.         this.scrollEvent = function () {
  72.             var that = this;
  73.             $(window).scroll(function () {
  74.                 var srollTop = $(window).scrollTop();
  75.                 var winHeight = $(window).height();
  76.                 var docHeight = $(document).height();
  77.                 if (srollTop + winHeight >= docHeight - 2) {
  78.                     that.fetchImg();
  79.                 }
  80.             })
  81.         }
  82.     }
  83. </script>
  84. </body>
  85. </html>

后台内容：

基于Django的FBV，函数视图，进行数据的读取和处理ajax请求

  1. def get_imgs(request):
  2.     # 获取已经取得的照片数目
  3.     index = request.GET.get('nid')
  4.     #获取QuerySet集合对象，取从index后的10调数据
  5.     imgs_list = models.Student.objects.values('id','img_dir','name')[index:index+10]
  6.     imgs_list = list(imgs_list)
  7.     # 传送状态和数据内容
  8.     ret = {
  9.         'status':True,
  10.         'data':imgs_list
  11.     }
  12.     return JsonResponse(ret)

　　

JavaScript实现瀑布流的更多相关文章

  1. 使用原生javascript实现瀑布流

    简介 瀑布流布局是一种很常见的布局方式,他的主要视觉体验为图片元素等宽不等高,图片元素之间的水平排序参差不齐,而且随着滚动条的滚动,数据会进行异步的加载,这样的布局有两个好处,1-有视觉的冲击力,比较 ...

  2. javascript实现瀑布流效果（固定宽度）

    HTML代码: <div id="content"> <div class="box"> <div class="img ...

  3. 9.Javascript原生瀑布流

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  4. 关于瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）

    瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...

  5. JavaScript：实现瀑布流

    一.前言: 瀑布流现在是一个非常常用的布局方式了,尤其在购物平台上,例如蘑菇街,淘宝等等. 二.流程: 1.在html文件中写出布局的元素内容: 2.在css文件中整体对每一个必要的元素进行样式和浮动 ...

  6. 用JavaScript和jQuery实现瀑布流

    ▓▓▓▓▓▓ 大致介绍 在慕课网上学习了用原生js和jQuery实现瀑布流,在这里做个笔记 ▓▓▓▓▓▓ 用JavaScript实现 基本结构: <div id="main" ...

  7. javascript瀑布流

    哇,瀑布流,是的,不错,不错,真的不错,很好玩的样子,于是自己想玩玩啊,来吧,就玩起. 循序渐进,我这里采用原生的js代码来书写.为了方便大家运行代码,我就全部样式和CSS都写在html里面了,当然还 ...

  8. javascript瀑布流效果

    javascript瀑布流效果 其实javascript瀑布流 前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...

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

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

随机推荐

  1. Intel Code Challenge Final Round (Div. 1 + Div. 2, Combined) F - Uniformly Branched Trees 无根树->有根树+dp

    F - Uniformly Branched Trees #include<bits/stdc++.h> #define LL long long #define fi first #de ...

  2. vscode 解决vue emmet不起作用

    现在 vscode 自带的提示已经很好用了,大部分时间自带的提示展示的 emmet 内容已经是所需的了 在首选项 设置中配置 v1.15.1 之后需要这样设置: "emmet.trigger ...

  3. React Native 系列(四)

    前言 本系列是基于React Native版本号0.44.3写的.RN支持CSS中的布局属性,因此可以使用CSS布局属性,这里就不详细地讲解了,这篇文章的重点主要是讲述一下RN中的Flex布局. CS ...

  4. iTerm2配置

    1.颜色Solarized 首先下载 Solarized: $ git clone git://github.com/altercation/solarized.git Terminal/iTerm2 ...

  5. sql：将字符类型字段转换成数字并排序

    使用cast 函数可以把字符类型字段(数学形式)转换为数字 比如 AND m.nfrc_meeting_no=? ORDER BY cast(m.BOOTH AS INT) ASC "; 结 ...

  6. 【二分图最大匹配】【匈牙利算法】zoj3988 Prime Set

    题意:给你n个正整数,一对和为素数的数为一个合法数对.你选不超过K个合法数对,使得你选的数对涉及到的数的数量最大化.输出这个值. 所有1之间是可以任意两两配对的. 把奇数放在左侧,偶数放在右侧. 考虑 ...

  7. python3.5: error while loading shared libraries: libpython3.5m.so.1.0: cannot open shared object file: No such file or directory

    python3.5安装报错 python3.5: error while loading shared libraries: libpython3.5m.so.1.0: cannot open sha ...

  8. nginx hello模块代码

    // ngx_http_mytest_module.c #include "ngx_core.h" #include "ngx_string.h" #inclu ...

  9. svm算法介绍

    在一个理想的分类当中,我们想要用一个超平面来将正类样本和负类样本划分开来.这个超平面的方程为 $\mathbf{w}^T\mathbf{x}+b=0$ 我们希望这个超平面能够使得划分更加的鲁棒,在图形 ...

  10. MySQL5.7添加授权账号及修改默认端口

    1.修改默认端口 打开配置文件 vim /etc/my.cnf 分别添加端口在client.mysql节点 [client] port=15099 [mysqld] port=15099 需要注意se ...