4.瀑布流js

<!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的更多相关文章

瀑布流js排列
var _px = document.getElementById("px"); var con=document.getElementById("content&quo ...
[JS练习] 瀑布流照片墙
记录JS实现瀑布流照片墙效果首先是前端页面 <!DOCTYPE html> <html lang="en"> <head> <meta ...
分享：纯 css 瀑布流和 js 瀑布流
分享一次纯 css 瀑布流和 js 瀑布流纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...
8款实用的Jquery瀑布流插件
1.网友Null分享Jquery响应式瀑布流布局插件首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...
代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
js瀑布流原理实现揭秘 javascript 原生实现
web,js瀑布流揭秘瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...
js瀑布流（定位法）
1.首先,自己写好图片路径,引入jquery <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
用js实现瀑布流的一种简单方法
现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...
js中masonry与infinitescroll结合形成瀑布流
后台:(有点问题 page应该从1开始而不是从0开始) public function actionExperts() { $top=5; $page=em ...

随机推荐

P1551 亲戚
这里是题面啊~ 这道题我就不多说了,基本(好吧没有基本)就是一道模板题,读入+并查集+输出,完美结束 #include<set> #include<map> #include& ...
ftp服务器三种模式
一.匿名开放模式(最不安全) 1.[root@localhost ~]# vim /etc/vsftpd/vsftpd.conf (主配置) anonymous_enable=YES //允 ...
【转帖】如何看待 HTTP/3 ？
如何看待 HTTP/3 ? https://mp.weixin.qq.com/s/fC10Cyj6xjjwOCnqxX-Dvg 车小胖的公众号转帖学习一下. 原创: 车小胖谈网络车小胖谈网络 20 ...
（4.13）mysql备份原理（转）
关键词:mysqldump原理,--single-transaction,mysql备份原理转自:https://www.cnblogs.com/cchust/p/5452557.html MySQ ...
创建B树，动态添加节点，并使用三种遍历算法对树进行遍历
ks17:algorithm apple$ cat btree_test.c ///********************************************************** ...
【一个蒟蒻的挣扎】LCA （倍增）
#include<cstdio> #include<iostream> #include<cstring> using namespace std; struct ...
无法安装 Microsoft Visual Studio 2010 Service Pack 1，因为此计算机的状态不支持此安装。有关如何解决此问题的说明，请参阅 Microsoft 下载中心网站上的自述文件
解决办法: 32 位系统删除:HKEY_LOCAL_MACHINE\Software\Microsoft\VSTO Designtime Setup\ 64 位系统删除:HKEY_LOCAL_MACH ...
MySQL基础入门之常用命令介绍
mysql命令介绍 mysql 是数据库管理命令通过mysql --help来查看相关参数及使用说明 mysql --help #mysql数据库管理命令 Usage: ...
SQL 基础语句整理
SQL教程 SELECT 语句 SELECT * FROM 表名称 DISTINCT 语句 SELECT DISTINCT 列名称 FROM 表名称 SELECT LastName,FirstName ...
使用Vim打开十六进制的文件
So Easy 这里使用打开 Hello.class 文件为例首先使用 vim -b Hello.class 打开文件,然后在 Vim 的命令模式下输入 :%!xxd 回车即可看见文件内容. 效果: ...

4.瀑布流js

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

随机推荐

热门专题