>>>model
class Img(models.Model):
src = models.FileField(verbose_name='路径',upload_to='static/img')
class Meta:
verbose_name_plural = '图片'
>>>views
import json
def imgback(request):
nid = request.GET.get('nid')
#获取的是QuerySet数据类型
img_list = Img.objects.values('id','src')
# 将QuerySet数据类型转换成列表
img_list = list(img_list)
ret = {
'status': True,
'data': img_list,
}
return HttpResponse(json.dumps(ret))
>>>html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width: 1000px;
margin: 0 auto;
}
.item{
width: 25%;
float: left;
}
.item img{
width: 100%;
}
</style>
</head>
<body>
<div class="content" 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.js"></script>
<script>
$(function () {
intImg();
scoreEvent();
});
NID=0;
LASTPOSION = 0;
function intImg() {
$.ajax({
url:'/imgback/',
type:'GET',
data:{nid:NID},
success:function (arg) {
ret = JSON.parse(arg);
var img_list = ret.data;
$.each(img_list,function (index,v) {
var eqv = (index+LASTPOSION+1)%4;
var tag = document.createElement('img');
tag.src = '/'+v.src;
$("#container").children().eq(eqv).append(tag);
//当循环到最后一个图片时,将图片id赋值给nid
if(index+1 == img_list.length){
NID = v.id
LASTPOSION = eqv
}
})
}
})
}
function scoreEvent() {
$(window).scroll(function () {
//文档高度
var docHeight = $(document).height();
//窗口高度
var winHeight = $(window).height();
//滚动条可滑动的高度
var scrollTop = $(window).scrollTop();
console.log(docHeight,winHeight,scrollTop);
if((winHeight + scrollTop)+1 >= docHeight){
console.log(1);
intImg()
}
})
}
</script>
</body>
</html>