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

随机推荐

安装docker registry
docker pull registry 创建目录 /usr/local/docker/registry 创建 docker-compose.yml version: '3' services: r ...
运行RGB-DSLAM的一些报错及处理方法
part 4 报错‘create’ is not a menber of 'CV::FeatureDetector::create(detector.c_str()); 查看opencv版本修改Cm ...
【VS开发】使用MFC创建并调用ActiveX控件
使用MFC创建并调用ActiveX控件今天做了一下ActiveX的使用测试,总结一下: 首先使用MFC创建一个activeX的控件譬如ActiveXTest,编译成ocx并注册,然后另外编写一个测试 ...
python的并发GIL 了解
gil 又称 global interpreter lock (全局解释器锁) #python 中一个线程对应于c语言中的一个线程 #gil使得同一个时刻只有一个线程在一个cpu上执行字节码,无法将 ...
PHP post调接口代码
PHP post调接口代码 /** * $url:接口地址 * $data:数组参数 **/ function postData($url, $data) { $ch = curl_init (); ...
Python类函数调用：missing 1 required positional argument
在Python中,应该先对类进行实例化,然后在应用类.注意,实例化的过程是应该加括号的.
正则表达式、原始字符串及re
正则表达式.原始字符串及re re是python中的一个文本解析工具,常用的方法有: 来源:https://www.ibm.com/developerworks/cn/opensource/os-cn ...
loj 2778「BalticOI 2018」基因工程
loj luogu 这题和NOI那道向量内积一个套路首先考虑求两行的不同元素个数,可以转化成一个行向量$a$和列向量$b$相乘得到一个值.如果只有$A,C$两种字符,那么令对应权值\(A ...
HBASE学习笔记(二)
一.HBASE内部原理 1.hbase系统架构上图组件介绍; 1):Client 包含访问 hbase 的接口, client 维护着一些 cache 来加快对 hbase 的访问,比如 regio ...
在mybatis中,在列表分页查询过程中造成集合属性数据丢失的问题
由于在进行多表关联分页查询时,某一个集合属性的多条数据正好位于2页的分割处,那么就会造成在前一页获取到的该集合属性的集合内部数据不全,因为其余数据被分到了第二页, 因此建议在进行集合属性的封装时,最好 ...

4.瀑布流js

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

随机推荐

热门专题