瀑布流方式三（方式二的升级版）

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

 

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>

 

posted @ 2018-06-21 18:50  阜阳小全  阅读(135)  评论(0)  编辑  收藏  举报