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

Posted 2020-11-19 lhqlhq

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了瀑布流方式三（方式二的升级版）相关的知识，希望对你有一定的参考价值。

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

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>

以上是关于瀑布流方式三（方式二的升级版）的主要内容，如果未能解决你的问题，请参考以下文章

网页设计之瀑布流，排列图片img最好的方式之一代码+注释=很详细！！！