<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .w{

            width: 1000px;

            margin: 0 auto;

        }

        .item{

            width: 25%;

            float: left;

        }

        .item img {

            width: 100%;

        }

    </style>

</head>

<body>

    <div>美女</div>

{#    <div class="w">#}

{#        {% for item in image_list %}#}

{#            <div class="item">#}

{#                <img src="/{{ item.name }}">#}

{#                <div>{{ item.title}}</div>#}

{#            </div>#}

{#        {% endfor %}#}

{#    </div>#}

    <div class="w" id="container">

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

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

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

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

    </div>

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

    <script>

        $(function () {

            var obj = new ScrollImg(); # 当实例一个函数对象之后，this就是代表这个对象

            obj.initImg();

            obj.scrollEvent();

        });

        function ScrollImg(){

            this.nid = 0;

            this.lasePosition = 3;

            this.initImg = function () {

                // this == obj

                var that = this; # 内部函数要使用外部的this是需要重新定义，否则this代表的是window的this

                $.ajax({

                url:"/get_img/",

                    type:"GET",

                　　dataType:"JSON",

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

                　　success:function (arg) {

                    　　var img_list = arg.data;

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

                        　　var eqv = (index + that.lasePosition + 1) % 4;  # 使用that代表this

                        　　tag = document.createElement("img");

                        　　tag.src = "/" + v.name;

                        　　$("#container").children().eq(eqv).append(tag)

                        　　// 当循环到最后一个的时候，将图片id赋值给NID

                        　　if (index + 1 == img_list.length){

                            　　that.nid = v.id;   # 如果图片数量不够时可以考录注释掉这句

                            　　that.lasePosition = eqv;  # 主要为了标记最后一个图片结束的位置，刷新后从这里在开始

                        　　}

                    　　})

                　　}

            　　})

           　　 };

            this.scrollEvent= function () {

                //this == obj

                var that = this

                $(window).scroll(function () {

                //什么时候到达底部

                //文档高度

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

                //窗口高度

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

                //滚动条滑动的高度，

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

                console.log(docHeight,winHeight,scrollTop);

                if (winHeight + scrollTop + 1 >= docHeight){

                    that.initImg();

                }

            })

            }

        }

    </script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .w{

            width: 1000px;

            margin: 0 auto;

        }

        .item{

            width: 25%;

            float: left;

        }

        .item img {

            width: 100%;

        }

    </style>

</head>

<body>

    <div>美女</div>

{#    <div class="w">#}

{#        {% for item in image_list %}#}

{#            <div class="item">#}

{#                <img src="/{{ item.name }}">#}

{#                <div>{{ item.title}}</div>#}

{#            </div>#}

{#        {% endfor %}#}

{#    </div>#}

    <div class="w" id="container">

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

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

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

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

    </div>

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

    <script>

        $(function () {

            initImg();

            scrollEvent();

        });

        var NID = 0;

        var LASEPOSITION = 3;

        function initImg() {

            $.ajax({

                url: "/get_img/",

                type: "GET",

                dataType: "JSON",

                data: {"nid": NID},

                success: function (arg) {

                    var img_list = arg.data;

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

                        var eqv = (index + LASEPOSITION + 1) % 4;

                        tag = document.createElement("img");

                        tag.src = "/" + v.name;

                        $("#container").children().eq(eqv).append(tag);

                        // 当循环到最后一个的时候，将图片id赋值给NID

                        if (index + 1 == img_list.length) {

                            NID = v.id;

                            LASEPOSITION = eqv;

                        }

                    })

                }

            })

        }

        // 当滚轮到达底部时，执行 initImg()

        function scrollEvent() {

            $(window).scroll(function () {

                //什么时候到达底部

                //文档高度

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

                //窗口高度

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

                //滚动条滑动的高度，

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

                console.log(docHeight, winHeight, scrollTop);

                if (winHeight + scrollTop + 1 >= docHeight) {

                    console.log(1);

                    initImg()

                }

            });

        }

    </script>

</body>

</html>

一共有两种形式，尽量选择第一种吧

def images(request):

    return render(request, "images.html")

def get_img(request):

    nid = request.GET.get("nid")

    image_list = models.Images.objects.filter(id__gt=nid).values("name", "id", "title")

    image_list = list(image_list)

    ret = {

        "status": True,

        "data": image_list

    }

    return HttpResponse(json.dumps(ret))
urlpatterns = [

    path('admin/', admin.site.urls),

    url(r'^images/$', views.images),

    url(r'^get_img/$', views.get_img),

    url(r'^video-(?P<classification_id>(\d+))-(?P<level_id>(\d+))-(?P<status>(\d+))/$', views.video),

    url(r'^video2-(?P<direction_id>(\d+))-(?P<classification_id>(\d+))-(?P<level_id>(\d+))/$', views.video2,

        name="video2"),

]

4.瀑布流js的更多相关文章

  1. 瀑布流js排列

    var _px = document.getElementById("px"); var con=document.getElementById("content&quo ...

  2. [JS练习] 瀑布流照片墙

    记录JS实现瀑布流照片墙效果 首先是前端页面 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. 分享：纯 css 瀑布流 和 js 瀑布流

    分享一次纯 css 瀑布流  和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...

  4. 8款实用的Jquery瀑布流插件

    1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...

  5. 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  6. js瀑布流 原理实现揭秘 javascript 原生实现

    web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...

  7. js瀑布流（定位法）

    1.首先,自己写好图片路径,引入jquery <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  8. 用js实现瀑布流的一种简单方法

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

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

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

随机推荐

  1. 【HANA系列】SAP UI5上传图片 用XSJS存储在HANA中的方法

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP UI5上传图片 用XSJ ...

  2. LeetCode.933-最近通话次数(Number of Recent Calls)

    这是悦乐书的第357次更新,第384篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第219题(顺位题号是933).写一个类RecentCounter来计算最近的请求. 它 ...

  3. django.db.migrations.exceptions.BadMigrationError: Migration tests in app bl

    这个错误基本上都是 替换文件后才会出现的问题 因为你替换后他的日志文件没有完全替换的话,那么日志对应不到就会出现这样的问题, 一个模糊的处理办法:重新进行数据迁移:首先删除migrations中除去_ ...

  4. nginx配置laravel项目

    在/etc/nginx/conf.d下新建一个laravel.conf文件,并编辑 写入如下文件即可 server { listen 80; server_name xxx; root "/ ...

  5. k8s-kubernetes-configmap存储

    存储 configMap configMap描述信息 ConfigMap功能在Kubernetes1.2版本中引入,许多应用程序会从配置文件.命令行参数或环境变量中读取配置信息. ConfigMap ...

  6. 红帽学习笔记[RHCSA] 第二周

    目录 红帽学习笔记[RHCSA]第二周 环境 第七课[网络配置相关] 在Vmware中添加网卡 将网卡添加到虚拟机上 关于网卡命名规则 配置网络 网络配置命令总结 更改hostname 关于SSH的一 ...

  7. 写出java.lang.Object类的六个常用方法

    java是面向对象的语言,而Object类是java中所有类的顶级父类(根类). 每个类都使用Object类作为超类,所有对象(包括数组)都实现这个类的方法,即使一个类没有用extends明确指出继承 ...

  8. Rsync+sersync（inotify）实现数据实时双向同步

    目录 Rsync+Sersync数据实时同步(双向) 服务介绍 节点声明 编译环境配置 安装Rsync 编辑Rsync配置文件 配置文件解析 配置密码文件 启动rsync验证 安装sersync服务 ...

  9. 10.AutoMapper 之自定义值解析器(Custom Value Resolvers)

    https://www.jianshu.com/p/3e7cf1d1f17d 自定义值解析器(Custom Value Resolvers) 虽然AutoMapper涵盖了相当多的目标成员映射方案,但 ...

  10. doT学习（二）之用法集合

    Advanced templating: illustrates defines and includes. Include external snippet defined in a variabl ...