前端内容：

使用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. Robot Framework 快速入门

    Robot Framework 快速入门 目录 介绍 概述 安装 运行demo 介绍样例应用程序 测试用例 第一个测试用例 高级别测试用例 数据驱动测试用例 关键词keywords 内置关键词 库关键 ...

  2. Xpath,XQuery,DTD

    一.Xpath XPath 是一门在 XML 文档中查找信息的语言;XPath 是 XSLT 中的主要元素.XPath是W3C标准.1.七种类型节点:元素.属性.文本.命名空间.处理指令.注释.文档节 ...

  3. info.plist文件里面添加描述 -> 配置定位,相册等

    <key>NSAppleMusicUsageDescription</key> <string>App需要您的同意,才能访问媒体资料库</string> ...

  4. 【C#】字段总结

    前沿: 字段(field)是一种数据成员,其中容纳了一个值类型的实例或者一个引用类型的引用. 正文: CLR支持类型(静态)字段和实例(非静态)字段.对于类型字段,用于容纳字段数据的动态内存是在类型对 ...

  5. python爬虫实战（三）--------搜狗微信文章（IP代理池和用户代理池设定----scrapy）

    在学习scrapy爬虫框架中,肯定会涉及到IP代理池和User-Agent池的设定,规避网站的反爬. 这两天在看一个关于搜狗微信文章爬取的视频,里面有讲到ip代理池和用户代理池,在此结合自身的所了解的 ...

  6. 洛谷P3758/BZOJ4887 [TJOI2017] 可乐 [矩阵快速幂]

    洛谷传送门,BZOJ传送门 可乐 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 299  Solved: 207 Description 加里敦星球的人 ...

  7. Python导入模块-Import

    #1语法importimport module1,module2,module3,module4 #2from xx import xx 语句from module import name1,name ...

  8. Python画一朵花

    from mpl_toolkits.mplot3d import Axes3D from matplotlib import cm from matplotlib.ticker import Line ...

  9. Hibernate fetching strategies（抓取策略）

    抓取策略(fetching strategies)是指:当应用程序需要在(Hibernate实体对象图的)关联关系间进行导航的时候,Hibernate如何获取关联对象的策略.抓取策略可以在O/R映射的 ...

  10. SpringBoot 部署 docker 打包镜像

    SpringBoot 部署 docker 打包镜像 环境: 1.代码编写工具:IDEA 2.打包:maven 3.docker 4.linux 7.JDK1.8 8.Xshell 9.Xftp 第一步 ...