jquery瀑布流

django:

def imgs(request):
    return render(request,'imgs.html')


def get_imgs(request):
    nid = request.GET.get('nid')
    img_list = list(models.Imgs.objects.filter(id__gt=nid).values('id','title','src'))
    data = {
        'status':True,
        'data':img_list,
    }
    return JsonResponse(data)


html:

<div>美女图库</div>     #使用块级标签浮动的特性需要一行显示多少标签就创建多少个div标签
<div class="content" id="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

JS:

$(function () {    #页面加载后立即运行
    var obj = new ScrollEvent();
    obj.initImg();
    obj.scrollImg();
});

function ScrollEvent(){   #创建JS类    JS  this如果函数有对象调用this代指对象本身，如果函数没有对象调用this代指windows
    this.nid = 0;    #发送到后端标记每次数据库取值的最小值
    this.lastposition = 3;   #标记每次循环最后一张图片的位置
    this.initImg = function () {
        var that = this;     #由于ajax里的函数没有对象调用会指向windows，把对象的this赋值给一个变量给ajax里的函数使用
        $.ajax({
            url:'/get_img.html',
            type:'GET',
            data:{nid:this.nid},
            dataType:'JSON',
            success:function (arg) {
                $.each(arg.data,function (index,values) {
                    var eqv = (index + that.lastposition + 1) % 4;   #索引 + 每次循环取值最后一张图片的位置  + 最后一张图片的位置+1等于下一次循环开始的第一张图片要放的位置  然后有4个DIV标签就对4取余 获得的值给eq索引
                    console.log(eqv);
                    var tag = document.createElement('img');   #创建IMG标签
                    tag.src = values.src;                       #标签的src属性赋值
                    $('#container').children().eq(eqv).append(tag);
                    //当循环到最后一个值的时候NID = values.id,
                    if(index + 1 == arg.data.length) {      #索引从0开始，数组的长度从1开始   索引 + 1 等于 数据的长度就是最后一个数据 把最后一个数据的ID属性赋值给nid 发送给后端下次后端从数据库取值使用__gt（大于） = nid取
                        {#NID = values.id;#}
                        that.lastposition = eqv;    #eqv代指当前循环最后一张图片所在的DIV标签的位置
                    }
                });
            }
        })
    };

    this.scrollImg = function () {
        var that = this;
        $(window).scroll(function () {    #监听窗口滚轮事件
            var document_height = $(document).height();   #获取html文档高度
            var windows_height = $(window).height();      #获取显示的窗口高度
            var scroll_height = $(window).scrollTop();　　#获取滚动条的高度
            if (windows_height + scroll_height == document_height) {   #如果窗口高度加上滚动条高度等于HTML文档高度那么说明到了页面的最下端再次执行函数从数据库拿数据
                that.initImg();
            }
        })
    }
 }