瀑布流第二种方式————基于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>Titletitle>
    <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>

 

转载于:https://www.cnblogs.com/lhqlhq/p/9210082.html

你可能感兴趣的:(瀑布流第二种方式————基于ajax方式)