前端内容：

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .container {

            width: 1000px;

            margin: 0 auto;

            background-color: lightgray;

        }

        .item {

            width: 24%;

            margin-right: 10px;

            float: left;

        }

        .item img{

            width: 100%;

        }

    </style>

</head>

<body>

{#将内容放在container中#}

<div class="container">

{#    将图片内容放入四个item中，形成四个item#}

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

</div>

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

<script>

    $(function () {

{#        网页加载时自动执行#}

        var obj = new ScrollImg();

        obj.fetchImg();

        obj.scrollEvent();

    })

{#    定义对象#}

    function ScrollImg() {

        this.nid = 0;

{#        取照片方法#}

        this.fetchImg = function () {

            var that = this

            $.ajax({

                url: '/get_imgs.html',

                type: 'GET',

{#        传输数据，已经取了多少照片，后台可以依据，继续取照片#}

                data: {'nid': that.nid},

                dataType: 'JSON',

                success: function (args) {

                    if (args.status) {

                        var img_list = args.data;

                        $.each(img_list, function (index, obj) {

                            var eqv = that.nid % 4;

                            var tag = document.createElement('img')

                            tag.src = '/' + obj.img_dir;

                            console.log(eqv)

                            $('.container').children().eq(eqv).append(tag)

                            that.nid += 1;

                        })

                    }

                }

            })

        }

{#        监听滚动条，当滚到底部时，自动加载数据#}

        this.scrollEvent = function () {

            var that = this;

            $(window).scroll(function () {

                var srollTop = $(window).scrollTop();

                var winHeight = $(window).height();

                var docHeight = $(document).height();

                if (srollTop + winHeight >= docHeight - 2) {

                    that.fetchImg();

                }

            })

        }

    }

</script>

</body>

</html>

后台内容：

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

def get_imgs(request):

    # 获取已经取得的照片数目

    index = request.GET.get('nid')

    #获取QuerySet集合对象，取从index后的10调数据

    imgs_list = models.Student.objects.values('id','img_dir','name')[index:index+10]

    imgs_list = list(imgs_list)

    # 传送状态和数据内容

    ret = {

        'status':True,

        'data':imgs_list

    }

    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. 免费的.NET混淆和反编译工具

    免费的.NET代码混淆工具: Eazfuscator.NET  http://www.foss.kharkov.ua/g1/projects/eazfuscator/dotnet/Default.as ...

  2. 【LOJ】#2014. 「SCOI2016」萌萌哒

    题解 这个题好妙啊 首先我们发现,如果我们可以暴力,就是把相同的元素拿并查集合起来,最后统计集合个数\(cnt\) 答案是\(9\*10^{cnt - 1}\) 然而我们做不到= = 我们可以用倍增的 ...

  3. thinkphp5.0 配置格式

    ThinkPHP支持多种格式的配置格式,但最终都是解析为PHP数组的方式. PHP数组定义 返回PHP数组的方式是默认的配置定义格式,例如: //项目配置文件 return [ // 默认模块名 'd ...

  4. 转：WebGL、Asm.js和WebAssembly概念简介

    WebGL.Asm.js和WebAssembly概念简介 转:http://www.techbrood.com/zh/news/webgl/webgl%E3%80%81asm_js%E5%92%8Cw ...

  5. ubuntu下让进程在后台运行

    (1)输入命令: nohup 你的shell命令 & (2)回车,使终端回到shell命令行: (3)使用第二第三条,完全屏蔽掉信号 用disown -h jobspec来使某个作业忽略HUP ...

  6. 长安大学第四届ACM-ICPC“迎新杯”程序设计竞赛-重现赛 G - 彩虹岛套娃

    题目描述 俄罗斯套娃是俄罗斯特产的木制玩具,一般由多个一样图案的空心木娃娃一个套一个组成,最多可达十多个,通常为圆柱形,底部平坦可以直立.颜色有红色,蓝色,绿色,紫色等.最普通的图案是一个穿着俄罗斯民 ...

  7. CodeForces 803A Maximal Binary Matrix

    枚举. 枚举对角线上放多少个$1$,剩余的贪心放,更新答案. #include <iostream> #include <cstdio> #include <cstrin ...

  8. FastReport.Net使用：[2]添加MSSQL数据源一

    如何使用MSSQL表作为数据源 1.点击FastReport设计器中Data->Add Data Source菜单项,打开数据源添加向导. 2.添加新的数据连接. 点击 New connecti ...

  9. HDU 2222 Keywords Search 【AC自动机】

    题目链接:[http://acm.hdu.edu.cn/showproblem.php?pid=2222] 题意:给出很多小字符串,然后给出一个文本串,问文本串中包含多少个小字符串.也就是说如果文本串 ...

  10. POJ 1222【异或高斯消元|二进制状态枚举】

    题目链接:[http://poj.org/problem?id=1222] 题意:Light Out,给出一个5 * 6的0,1矩阵,0表示灯熄灭,反之为灯亮.输出一种方案,使得所有的等都被熄灭. 题 ...