• 瀑布流方式三(方式二的升级版)


    此版本,是方式二的升级版,一,将全局变量封装到函数内,二,添加滚轮,可以持续取数据

    url文件

    from django.contrib import admin
    from django.urls import path
    from app01 import views
    
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('img.html/', views.img),
        path('get_img.html/', views.get_img),
    ]

    views文件

    from django.shortcuts import render,HttpResponse
    from django.http import JsonResponse
    from app01 import models
    
    
    def img(request):
        return render(request,'img.html')
    
    def get_img(request):
        import json
        nid = request.GET.get('nid')
        img_list = models.Img.objects.filter(id__gt=nid).values('id','src','title')  #获取数据库的中数据
        img_list = list(img_list)
        ret = {'status':True,'data':img_list}
        # return HttpResponse(json.dumps(ret))
        return JsonResponse(ret)

    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">
    
        <div class="item">
    
        </div>
    
        <div class="item">
    
        </div>
    
        <div class="item">
    
        </div>
        <div class="item">
    
        </div>
    
    </div>
    
        <script src="/static/jquery-3.3.1.js"></script>
        <script>
            $(function () {
                var obj = new ScrollImg()
                obj.initImg()
                obj.scrollEvent()
            })
    
            function ScrollImg() {
                this.nid=0;
                this.lastPostion=3;
                var that = this
    
                this.initImg = function () {
                    $.ajax({
                    url:'/get_img.html',
                    type:'GET',
                    data:{'nid':that.nid},
                    dataType:'JSON',
                    success:function (arg) {
                        var img_list = arg.data
                        $.each(img_list,function (index,v) {
                            var eqv = (index+that.lastPostion +1) % 4;
                            console.log(eqv)
                            {#eqv就是图片的索引位置,加that.lastpostion+1 是为了第二次取到数据后,紧接继续拜访#}
    
    
                            {# index是循环的索引,v是去到的值(字典形式的)#}
                            var tag = document.createElement('img');
                            {#创建一个img标签,标签的地址是'/'+v.src,然后将标签添加到对应的子标签#}
                            tag.src='/'+v.src
                            $('.w').children().eq(eqv).append(tag);
    
                        {#  当循环到最后一个的时候,将图片ID复制给 NID  #}
                            if(index+1 == img_list.length){
                                {#that.nid = v.id#}
                                {#  that.nid是向后台发送的nid,因为图片少,所以需要注掉先 #}
    
                                that.lastPostion = eqv
                            }
    
                        })
    
                    }
                })
    
    
                };
                this.scrollEvent = function () {
                    $(window).scroll(function () {
                {#  什么时候滚轮到达最底部  #}
                {#  文档高度:可以理解为body高度#}
                    var docHeight = $(document).height()
    
                {#  窗口高度:屏幕窗口#}
                    var winHeight = $(window).height()
    
                {#  滚动条滑动的高度#}
                    var scrollTop = $(window).scrollTop()
    
                    if(winHeight+scrollTop == docHeight){
                        that.initImg();
    
                    }
                })
                }
            }
    
    
    
    
    
            {# 设置NID为全局变量,第一次ajax发送时是0.这时ajax只会从数据库取一部分数据,等滚轮划到底部,再出发ajax,再继续取值#}
    
    
        {#   下面可以监听鼠标滚轮动作,当滚轮到最底部时,继续执行initImg函数,然后到数据库中再取一次 #}
    
    
        </script>
    
    
    </body>
    </html>
  • 相关阅读:
    rowspan colspan
    阿里云升级cpu和内存后服务器连接不上
    FIB nexthop Exception是什么 转载
    fib 结构以及路由 fib 创建
    路由信息查看
    策略路由之添加
    路由fib表之input查找
    路由output 查找
    转载 |工作中我常用的分析算法
    Vlookup 查找和多条件查找
  • 原文地址:https://www.cnblogs.com/lhqlhq/p/9210543.html
Copyright © 2020-2023  润新知