页面显示照片样式为瀑布流：

上面的div个数可以按照自己安排进行划分。img的分布可以使用模板标签以及自定义模板函数进行排布：

自定义模板函数实现可以看，最后几列：python---django中模板渲染

def img(req):

    img = models.Img.objects.all()

    return render(req,"images.html",{'img':img})

服务端数据分发

from django import template

register = template.Library()

@register.filter

def formod(count,mod):

    return count%mod

自定义模板函数

<div class="w">

    <div class="item">

        {% for item in img %}

            {% if forloop.counter|formod: ==  %}

            <img src="{{ item.src }}" alt="">

            {% endif %}

        {% endfor %}

    </div>

    <div class="item">

        {% for item in img %}

            {% if forloop.counter|formod: ==  %}

            <img src="{{ item.src }}" alt="">

            {% endif %}

        {% endfor %}

    </div>

    <div class="item">

        {% for item in img %}

            {% if forloop.counter|formod: ==  %}

            <img src="{{ item.src }}" alt="">

            {% endif %}

        {% endfor %}

    </div>

    <div class="item">

        {% for item in img %}

            {% if forloop.counter|formod: ==  %}

            <img src="{{ item.src }}" alt="">

            {% endif %}

        {% endfor %}

    </div>

</div>

前端使用模板函数

下面开始回顾JavaScript：JavaScript中函数和类

记住：尽量少使用全局函数，因为项目中可能会在某些你自己都不知道的地方修改了这个变量的原来数据

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .w{

            width: 1000px;

            margin:  auto;

        }

        .item{

            width: %;

            float: left;

        }

        {#图片默认大小是按照自己的大小来排序#}

        .item img{

            width: %;

        }

    </style>

</head>

<body>

<div class="w">

    <div class="item">

    </div>

    <div class="item">

    </div>

    <div class="item">

    </div>

    <div class="item">

    </div>

</div>

</body>

</html>

HTML代码部分

NID = ;

    Flag = true;

    LastPosition = ;

    $(function(){

        initImg();

        $(window).scroll(function(){

            var bodyTop = $("body").scrollTop();

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

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

            var offset = docHg - bodyTop - winHg;

            if(offset < ){

                NID += ;

                if(Flag){

                    initImg();

                }

            }

        })

    })

    function initImg(){

        $.ajax({

            url:'/get_images.html',

            type:"GET",

            data:{nid:NID},

            dataType:"json",

            success:function (data) {

                if(!data.status){

                    Flag = false;

                    return;

                }

                var img_list = data.data;

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

                    //console.log(i,v)  //i索引0开始   v字典（对象）

                    var mod = (index+LastPosition)%;

                    var img = '<img src="'+v.src+'" alt="'+v.title+'">'

                    var img = document.createElement('img') //document.createElement("big");  // 通过 DOM 创建新元素

                    img.src=v.src

                    img.title=v.title

                    $(".item")[mod].appendChild(img)

                    console.log(mod)

                    if(index+ == img_list.length){

                        NID = v.id;

                        LastPosition = mod + ;

                    }

                });

            }

        })

    }

js使用ajax获取数据（使用了全局变量）

下面是使用类，将数据和函数进行封装，来避免全局变量干扰：

<script src="/static/jquery.js"></script>

<script>

    //封装为类，防止全局变量出现

    function ScrollImg(){

        this.NID = ;

        this.LastPosition = ;

        this.Flag = true;

        this.initImg = function(){

            // this = obj

            var that = this;

            $.ajax({

            url:'/get_images.html',

            type:"GET",

            data:{nid:that.NID},

            dataType:"json",

            //这里面还有一个函数属于ajax对象，所以若是在这里面出现this，则不会是外面的obj对象，所以下面的数据NID，LastPosition，Flag不是上面的对象数据

            //要想调用obj对象数据，我们需要传递这个对象，而且为了避免this冲突，我们可以将obj对象赋值给一个变量（例如：that），则在ajax中就可以进行使用了（传递给ajax，ajax对象本身没有这个数据就会往上层作用域去取数据）

            success:function (data) {

                if(!data.status){

                    that.Flag = false;

                    return;

                }

                var img_list = data.data;

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

                    //console.log(i,v)  //i索引0开始   v字典（对象）

                    var mod = (index+that.LastPosition)%;

                    var img = '<img src="'+v.src+'" alt="'+v.title+'">'

                    var img = document.createElement('img') //document.createElement("big");  // 通过 DOM 创建新元素

                    img.src=v.src

                    img.title=v.title

                    $(".item")[mod].appendChild(img)

                    console.log(mod)

                    if(index+ == img_list.length){

                        that.NID = v.id;

                        that.LastPosition = mod + ;

                    }

                });

            }

        })

        };

        this.scrollEvent = function(){

            //this = obj

            var that = this;

            $(window).scroll(function(){    //又是一个函数，这个函数的调用者也不是我们，所以我们不能单纯使用this

                var bodyTop = $("body").scrollTop();

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

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

                var offset = docHg - bodyTop - winHg;

                if(offset < ){

                    that.NID += ;

                    if(that.Flag){

                        that.initImg();

                    }

                }

            })

        }

    }

    //不含全局变量  此处进行调用该对象

    $(function(){

        var obj = new ScrollImg();

        obj.initImg();

        obj.scrollEvent();

    })

</script>

补充：scroll事件：

#var winTop = $("body").scrollTop();   $(window).scrollTop();  $(document).scrollTop();  当前页面上界偏移量

#var docHg=$(document).height();        当前文档的高度

#var winHg=$(window).height();          当前浏览器窗口高度（客户区）

#var off=$(this).offset().top;          某个元素的上界偏移量

#var hgt=$(this).height();              某个元素高度

#其中特别注意$("body").height();和$(document).height();

#两个并不是一致的，因为body中有些元素的位置可能是相对位置，导致body的高度并不是准确的高度

#所以要获取整个文档高度，需要使用$(document).height();

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

  1. 从零开始讲解JavaScript中作用域链的概念及用途

    从零开始讲解JavaScript中作用域链的概念及用途 引言 正文 一.执行环境 二.作用域链 三.块级作用域 四.其他情况 五.总结 结束语 引言 先点赞,再看博客,顺手可以点个关注. 微信公众号搜 ...

  2. JavaScript中作用域和作用域链的简单理解（变量提升）

    通过阅读<JS高级程序设计>这本书,对js中的作用域和作用域链知识有了初步的了解和认识,准备成笔记供大家参考,笔记中字数比较多,但个人认为叙述的挺详细的,所以希望读者耐心看.再者,本人了解 ...

  3. js中masonry与infinitescroll结合 形成瀑布流

    后台:(有点问题 page应该从1开始 而不是从0开始)     public function actionExperts()    {        $top=5;        $page=em ...

  4. 在javascript中的浏览器兼容问题以及兼容浏览器汇总（默认事件，阻止冒泡，事件监听。。。）以及解决方式详解

    在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级   渐进增强(progressive enhancement): 针对低版本浏览器进 ...

  5. python---django中模板渲染（csrf令牌使用，自定义模板函数）

    使用终端,可以更方便的去实验,但是没有提示信息: 在项目目录下: D:\MyPython\day23\HelloWorld>python manage.py shell 开始实验: >&g ...

  6. JavaScript中---作用域

    作用域: 变量还有函数作用的范围. 浏览器的内核主要有两大功能,一个是渲染页面,另一个就是我们的JavaScript的解释器了. 我们主要来说说JavaScript解释器,在解析时是怎么样的工作原理. ...

  7. JavaScript中作用域和作用域链解析

    学习js,肯定要学习作用域,js作用域和其他的主流语言的作用域还存在很大的区别. 一.js没有块级作用域. js没有块级作用域,就像这样: if(){ : console.log(a) //输出100 ...

  8. 理解JavaScript中作用域链的关系

    javascript里的关系又多又乱.作用域链是一种单向的链式关系,还算简单清晰:this机制的调用关系,稍微有些复杂:而关于原型,则是prototype.proto和constructor的三角关系 ...

  9. javascript中作用域

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

随机推荐

  1. （转）OWASP ZAP下载、安装、使用（详解）教程

    OWASP Zed攻击代理(ZAP)是世界上最受欢迎的免费安全审计工具之一,由数百名国际志愿者*积极维护.它可以帮助您在开发和测试应用程序时自动查找Web应用程序中的安全漏洞. 也可以说:ZAP是一个 ...

  2. 微软职位内部推荐-Senior Dev Lead - SharePoint

    微软近期Open的职位: SharePoint is a multi-billion dollar enterprise business that has grown from an on-prem ...

  3. SCRUM 12.16

    今天大家又聚在一起开了个小会. 我们的爬虫出现了一些问题.某些美团的网页无法爬取,现在正在努力工作中. 关于用户统计的功能我们的以部分成员依然在完善中,17.18号应该基本能够推出. 成员 任务 彭林 ...

  4. 20135220谈愈敏Blog5_系统调用（下）

    系统调用(下) 谈愈敏 原创作品转载请注明出处 <Linux内核分析>MOOC课程 http://mooc.study.163.com/course/USTC-1000029000 给Me ...

  5. 基于 Java Web 的毕业设计选题管理平台--系统设计和任务分配

    一.团队作业:http://www.yzhiliao.com/course/70/task/440/show 二.个人作业: 1.项目的代码托管 (1).GitHub 地址:https://githu ...

  6. DataGridView显示行号-RowPostPaint

    DataGridView控件在显示数据时,我们有时候需要显示行号,以便检索查看方便使用. 但DataGridView默认没有设置显示行号的属性. 此时我们只要在DataGridView的RowPost ...

  7. php四排序-选择排序

    原理: 在一列数字中,选出最小数与第一个位置的数交换.然后在剩下的数当中再找最小的与第二个位置的数交换,如此循环到倒数第二个数和最后一个数比较为止.(以下都是升序排列,即从小到大排列) 举例说明: $ ...

  8. [财务知识]IFRS9

    浅谈IFRS9 2018-07-10 23:15信用/收益 原创申明 本文原创作者为金融监管研究院助理研究员李健,未经授权谢绝转载.引用.抄袭. 引言 2018年6月6日,财政部会计司发布了“关于就& ...

  9. [转帖]"微信支付"勒索病毒制造者被锁定 传播、危害和疫情终极解密 --- 可以学习下一年火绒团队的分析原理的精神.

    "微信支付"勒索病毒制造者被锁定 传播.危害和疫情终极解密 https://www.cnbeta.com/articles/tech/794851.htm 12月1日,首个要求&q ...

  10. TP3.2加载外部PHPexcel类，实现导入和导出

    TP3.2加载外部PHPexcel类,实现导入和导出 导入: 1.将下载好的PHPexcel文件放到libray/Org/Uti/文件夹下,将PHPEXCEL.PHP改为PHPEXCEL.class. ...