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

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

上面的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:4 == 1 %}
            <img src="{{ item.src }}" alt="">
            {% endif %}
        {% endfor %}
    </div>
    <div class="item">
        {% for item in img %}
            {% if forloop.counter|formod:4 == 2 %}
            <img src="{{ item.src }}" alt="">
            {% endif %}
        {% endfor %}
    </div>
    <div class="item">
        {% for item in img %}
            {% if forloop.counter|formod:4 == 3 %}
            <img src="{{ item.src }}" alt="">
            {% endif %}
        {% endfor %}
    </div>
    <div class="item">
        {% for item in img %}
            {% if forloop.counter|formod:4 == 0 %}
            <img src="{{ item.src }}" alt="">
            {% endif %}
        {% endfor %}
    </div>
</div>

前端使用模板函数

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

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .w{
             1000px;
            margin: 0 auto;
        }

        .item{
             25%;
            float: left;
        }
        {#图片默认大小是按照自己的大小来排序#}
        .item img{
             100%;
        }
    </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 = 0;
    Flag = true;
    LastPosition = 0;

    $(function(){
        initImg();

        $(window).scroll(function(){
            var bodyTop = $("body").scrollTop();
            var docHg = $(document).height();
            var winHg = $(window).height();

            var offset = docHg - bodyTop - winHg;
            if(offset < 48){
                NID += 1;
                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)%4;

                    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+1 == img_list.length){
                        NID = v.id;
                        LastPosition = mod + 1;
                    }
                });
            }
        })
    }

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

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

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

    //封装为类，防止全局变量出现
    function ScrollImg(){
        this.NID = 0;
        this.LastPosition = 0;
        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)%4;

                    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+1 == img_list.length){
                        that.NID = v.id;
                        that.LastPosition = mod + 1;
                    }
                });
            }
        })
        };

        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 < 48){
                    that.NID += 1;
                    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();