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

随机推荐

Mybatis 之 SQL生成技巧
一.增 1.<trim> 和<if>实现数据插入 <insert id="addInOrder" parameterType="XXX.mo ...
微信小程序购物车实现
1,wxml <view class="miniCart-wrap {{isIpx?'is-ipx':''}}"> <view class="miniC ...
python 并发编程多线程信号量
一信号量信号量也是一把锁,可以指定信号量为5,对比互斥锁同一时间只能有一个任务抢到锁去执行,信号量同一时间可以有5个任务拿到锁去执行如果说互斥锁是合租房屋的人去抢一个厕所,那么信号量就相当于一群 ...
在CentOS 8 Linux中安装使用Cockpit服务器管理软件
在本文中,我们将帮助您在CentOS 8服务器中安装Cockpit Web 控制台,以管理和监视本地系统以及网络环境中的Linux服务器.您还将学习如何将远程Linux主机添加到Cockpit并在Ce ...
String，StringBuffer，StringBulider 三者的区别
1.String 是字符串常量,StringBuffer 和StringBuilder 是字符串变量. 2.运行速度 StringBuilder > StringBuffer > Stri ...
BZOJ 1303 中位数图题解
题面因为所求的是中位数,所以考虑改变原序列.把大于 b 的数全部变为 1,小于 b 的数变为 −1,等于 b 则为 0.问题就变为求存在几个包含 b的区间和为 0 . 根据乘法原理,我们枚举每一个l ...
python 链接mysql 连接池
# python 链接mysqlimport mysql.connector.poolingconfig = { "host":"localhost", &qu ...
【网络安全】telnet 登陆远程服务器
• 实验环境: a. Vmware 14 PRO b. windows 7 x64 客户机 c. windows server 2008 R2 x64 服务器 ...
mybatis映射文件mapper详解
mapper.xml映射文件主要是用来编写sql语句的,以及一些结果集的映射关系的编写,还有就是缓存的一些配置等等. 1.<select>元素 <select>元素就是sql查 ...
Solr IK分词器配置
下载地址:https://search.maven.org/search?q=com.github.magese 分词器配置: 参考:https://www.cnblogs.com/mengjinlu ...

4.瀑布流js

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

随机推荐

热门专题