settings中的配置不再详细说明
一.路由代码
from django.contrib import admin
from django.conf.urls import url
from app import views urlpatterns=[
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 render def 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>