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

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

url文件

from django.contrib import admin
from django.urls import path
from app01 import viewsurlpatterns = [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 jsonnid = 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 = thisthis.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>

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

瀑布流方式三（方式二的升级版）相关推荐

html布局结构瀑布流,三种方式实现瀑布流布局
分别使用javascript,jquery,css实现瀑布流布局: 第一种方式:使用JavaScript: 瀑布流布局 *{padding:0;margin:0;} .clearfix:after, ...
2021年大数据Spark（三十二）：SparkSQL的External DataSource
目录 External DataSource 数据源与格式 text 数据 json 数据 csv 数据 parquet 数据 jdbc 数据加载/保存数据-API ...
axi dma 寄存器配置_FPGA Xilinx Zynq 系列（三十二）AXI 接口
大侠好,欢迎来到FPGA技术江湖,江湖偌大,相见即是缘分.大侠可以关注FPGA技术江湖,在"闯荡江湖"."行侠仗义"栏里获取其他感兴趣的资源,或者一起煮酒言欢. ...
ASP 三十二条精华代码
整理收藏: ASP 三十二条精华代码 1. οncοntextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键 <table b ...
tensorflow学习笔记(三十二):conv2d_transpose (解卷积)
tensorflow学习笔记(三十二):conv2d_transpose ("解卷积") deconv解卷积,实际是叫做conv_transpose, conv_transpose ...
Android:页面跳转传参方式一，页面跳转传参方式二
一.页面跳转传参方式一跳转的过程如何传参:也就是页面之间如何传递参数,有点像函数调用如何传参,页面跳转也要传参. 复制一个工程你要跳转,(现在的代码如下),intent 既然能设置跳转到哪个页面 ...
分布式理论：CAP是三选二吗？
分布式系统的 CAP 理论:首先把分布式系统中的三个特性进行了如下归纳: ● 一致性(C): 在分布式系统中的所有数据备份,在同一时刻是否同样的值.(等同于所有节点访问同一份最新的数据副本) ● 可用 ...
python建站部署_SpringBoot入门建站全系列（三十二）接入xxl-job分布式任务调度平台...
SpringBoot入门建站全系列(三十二)接入xxl-job分布式任务调度平台一.概述 XXL-JOB是一个轻量级分布式任务调度平台,其核心设计目标是开发迅速.学习简单.轻量级.易扩展.现已开放源 ...
微信小程序把玩（三十二）Image API
原文:微信小程序把玩(三十二)Image API 选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用主要方法: wx. ...

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

瀑布流方式三（方式二的升级版）相关推荐

最新文章

热门文章