瀑布流第二种方式————基于ajax方式

第二种瀑布流是基于ajax方式工作的。与之前一种形式相比，这种方式可以向后台发送数据，

同时，ajax可以根据数据，每次只取一部分的数据，等滚轮划到底部时，再出发ajax，然后又去一次

 

 

models文件

class Img(models.Model):
    src = models.FileField(max_length=32,verbose_name='图片路径',upload_to='static/upload')
    title = models.CharField(max_length=16,verbose_name='标题')
    summary = models.CharField(max_length=128,verbose_name='简介')

    class Meta:
        verbose_name_plural = '图片表'

    def __str__(self):
        return self.title

 

 

 

 

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 () {
            initImg()
        })
        NID=0
        {# 设置NID为全局变量，第一次ajax发送时是0.这时ajax只会从数据库取一部分数据，等滚轮划到底部，再出发ajax,再继续取值#}
        function initImg() {
            $.ajax({
                url:'/get_img.html',
                type:'GET',
                data:{'nid':NID},
                dataType:'JSON',
                success:function (arg) {
                    var img_list = arg.data
                    $.each(img_list,function (index,v) {
                        var eqv = index % 4;  
                        {# index是循环的索引，v是去到的值（字典形式的）#}
                        var tag = document.createElement('img')
                        {#创建一个img标签，标签的地址是'/'+v.src，然后将标签添加到对应的子标签#}
                        tag.src='/'+v.src
                        $('.w').children().eq(eqv).append(tag)
                    })

                }
            })
        }


    {#   下面可以监听鼠标滚轮动作，当滚轮到最底部时，继续出发get_img函数，然后到数据库中再取一次 #}

    </script>


</body>
</html>

 

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