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 ...

随机推荐

C++ 结构体重载运算符
听说这个东西有很多种写法什么的,来不及了(要退役了),先整一个之前用到的,可能用到的频率比较高的东西上来. struct node{ ll x,y; }; bool operator < (co ...
【神经网络与深度学习】caffe静态链接库“Unknown layer type: Convolution (known types: )”和“ 磁盘空间不足”问题的解决办法
这一段时间把caffe在windows环境下编译了一下,tool里面的cpp全部编译成了exe.再用的时候有两个问题让我头疼了好长时间! 第一个问题 "db_lmdb.hpp:14] Che ...
ansible-playbook 案例
nginx的安装编写nginx的自动部署文件nginx.yml hosts主机更改为自己定义的访问目标主机组的IP地址,查看测试页面测试页面:显示的是本机ip 1 <h1> ...
poj3761（反序表）
题目链接:https://vjudge.net/problem/POJ-3761 题意:给出n和k,求通过k趟冒泡排序得到长为n的有序排列(元素为n个不同的数)的原排列有多少个. 思路: 先给出反序表 ...
ef core 动态拼接条件
var sql = new List<string>(); var sqlparams = new List<string>(); ; foreach (var p in ph ...
redis内存满了怎么办？
redis最为缓存数据库,一般用于存储缓存数据,用于缓解数据库压力,但是缓存太多,内存满了怎么办呢.一般有以下几种方法一.增加内存 redis存储于内存中,数据太多,占用太多内存,那么增加内存就是最 ...
springMVC原理简单介绍
说明: 用户发送请求到DispatcherServlet,即前端控制器 DipatcherServlet调用处理器映射器HandlerMapping解析处理器映射器HandlerMapping根据请 ...
Being a Good Boy in Spring Festival
Being a Good Boy in Spring Festival Problem Description 一年在外父母时刻牵挂春节回家你能做几天好孩子吗寒假里尝试做做下面的事情吧陪妈妈逛一 ...
AT2294 Eternal Average
题目题目给我们的这个东西可以转化为一棵$k$叉树,有$n+m$个叶子节点,其中$m$个权值为$1$,$n$个权值为$0$,每个非叶子节点的权值为其儿子的平均值,现在问你根节点 ...
PHP控制session时效（转）
1.php session 有效期php的session有效期默认是1440秒(24分钟),如果客户端超过24分钟没有刷新,当前session会被回收,失效. 当用户关闭浏览器,会话结束,sessio ...

4.瀑布流js

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

随机推荐

热门专题