django模板中使用JQ代码实现瀑布流显示效果

settings中的配置不再详细说明

一.路由代码

from django.contrib import admin
from django.conf.urls import url
from app import viewsurlpatterns=[url(r'^admin',admin.site.urls),# 页面显示get请求url(r'^imgs.html$',views.imgs),# 获取图片的ajax请求url(r'^get_imgs.html$',views.get_imgs),
]

二.视图函数

from app import models
from django.http import JsonResponse
from django.shortcuts import renderdef imgs(request):return render(request, 'img.html')def get_imgs(request):nid = request.GET.get('nid')# id__gt=nid表示查询id大于多少的数据,nid由模板的ajax传过来img_list = models.Img.objects.filter(id__gt=nid).values('id', 'src', 'title')# queryset对象转列表img_list = list(img_list)ret = {'status': True,'data': img_list}return JsonResponse(ret)

三.models代码

from django.db import models
# Create your models here.
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

四.模板代码

<!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" id="container"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
</div>
<script src="/static/JS/jquery-3.3.1.min.js"></script>
<script>$(function () {var obj = new ScrollImg();obj.fetchImg();obj.scrollEvent();});function ScrollImg() {this.NID = 0;this.LASTPOSITION = 3;this.fetchImg = function () {var that = this;$.ajax({url: '/get_imgs.html',type: 'GET',//前端传到后台的获取数据量data: {nid: that.NID},dataType: 'JSON',success: function (arg) {var img_list = arg.data;//循环列表获取index:索引,v:图片信息(id,src,title)$.each(img_list, function (index, v) {//取4的余数,始终返回的是0,1,2,3的索引var eqv = (index + that.LASTPOSITION + 1) % 4;console.log(eqv);//创建img标签var tag = document.createElement('img');//img标签的src地址等于图片的src地址tag.src = '/' + v.src;$('#container').children().eq(eqv).append(tag);//如果index是最后一个,if (index + 1 == img_list.length) {//测试使用,始终只取开始那几条数据that.LASTPOSITION = eqv;//取完该页面显示的条数后,再去后面的条数//that.NID = v.id;}})}})};this.scrollEvent = function () {var that = this;//绑定滚轮事件$(window).scroll(function () {//滚动条可滑动的高度var scrollTop = $(window).scrollTop();//窗口高度var winHeight = $(window).height();//文档高度var docHeight = $(document).height();//如果滑到最后,执行获取图片if (scrollTop + winHeight == docHeight) {that.fetchImg();}})}}</script>
</body>
</html>

转载于:https://www.cnblogs.com/angelyan/p/10462872.html

django模板中使用JQ代码实现瀑布流显示效果相关推荐

Django 模板中使用 Ajax POST
Django 模板中使用 Ajax POST 解决 Forbidden (CSRF token missing or incorrect.) 报错的解决方案在以Django作为后端的项目开发中,前端 ...
Django 模板中使用css, javascript
Django 模板中使用css, javascript (r'^css/(?Ppath.*)$', 'django.views.static.serve', {'document_root': '/v ...
Django模板中如何将函数的变量作为字典key并获取对应的value
Django模板中如何将函数的变量作为字典key并获取对应的value 问题现有一字典 mydict = {'abc': 123} key = 'abc' 传入到模板后在模板html中你可能像下面 ...
#RunJS# 最少代码的瀑布流实现
今天在开源中国上发现了一个很好的瀑布流的例子------#RunJS# 最少代码的瀑布流实现 html5的,看上去很帅气,因为是html5 所以浏览器的支持上应该是会受到影响的,直接把源码粘贴过 ...
Django模板（编写html代码
1.模板用于编写html代码,还可以嵌入模板代码更快更方便的完成页面开发,再通过在视图中渲染模板,将生成最终的html字符串返回给客户端浏览器模版致力于表达外观,一个视图可以使用任意一个模板,一个 ...
Django 模板中变量过滤器标签的使用方法
一.变量 1.变量的形式是:{{variable}}, 当模板引擎碰到变量的时候,引擎使用变量的值代替变量. 2.使用dot(.)能够访问变量的属性 3.当模板引擎碰到dot的时候,查 ...
Django 模板中变量、过滤器、标签的使用方法
2019独角兽企业重金招聘Python工程师标准>>> 一.变量 1.变量的形式是:{{variable}}, 当模板引擎碰到变量的时候,引擎使用变量的值代替变量. 2.使用dot( ...
python endif_在Django模板中的 if else endif
if/else {% if %} 标签检查(evaluate)一个变量,如果这个变量为真(即,变量存在,非空,不是布尔值假),系统会显示在 {% if %} 和 {% endif %} 之间的任何内容 ...
django模板中引入CSS和JS
django中的模板功能非常强大,但是在django的模板中引入css和js要怎么处理呢,这个还是真的和普通的网页不太一样.因为在django中一般用来存放的模板的目录为template目录(注意:这 ...

django模板中使用JQ代码实现瀑布流显示效果

settings中的配置不再详细说明

一.路由代码

二.视图函数

三.models代码

四.模板代码

django模板中使用JQ代码实现瀑布流显示效果相关推荐

最新文章

热门文章