1.models.py
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
2.views.py
from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
from app01 import models
# Create your views here.
def imgs(request):
# img_list = models.Img.objects.all()
return render(request,'imgs.html')
def get_imgs(request):
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)
# return JsonResponse([11,22,33],safe=False)
3.urls.py
urlpatterns = [
path('admin/', admin.site.urls),
path('imgs/', views.imgs),
path('get_imgs/', views.get_imgs),
]
4.imgs.py
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>imgs</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">11
</div>
<div class="item">22
</div>
<div class="item">33
</div>
<div class="item">44
</div>
</div>
<script src="/static/jquery-1.12.4.js"></script>
<script>
//尽量不要有全局变量
$(function () {
var obj = new ScrollImg();
obj.initImg();
obj.scrollEvent();
});
function ScrollImg() {
this.nid = 0;
this.lastPosition = 0;
this.initImg = function () {
//this = obj
var that = this;
$.ajax({
url: '/get_imgs',
type: 'GET',
data:{nid:that.nid},
dataType: 'JSON',
success:function (arg) {
var img_list = arg.data;
$.each(img_list,function (index,v) {
//index + LASTPOSTION + 1 此时第二次来的时候对应的 是 0 + 3 / 4= 3（对应第二次来的第一个位置）
var eqv = (index + that.lastPosition) % 4;
console.log(eqv);
var tag = document.createElement('img');
tag.src = '/'+ v.src;
var qqq = $('#container').children()
//console.log(qqq)
$('#container').children().eq(eqv).append(tag);
//当循环到最后一个图片时，将图片的ID复制给NID
if(index+1==img_list.length){
//注释此时只是模拟。。。。 7
that.nid=v.id;
//保存的是最后一个的位置 0 1 2 3 0 1 2
that.lastPosition = eqv+1;
}
})
}
})
}
this.scrollEvent = function () {
//this = obj
var that = this;
//当页面滚动的时候就进行执行
$(window).scroll(function () {
//什么时候到达最底部
//文档高度
var docHeight = $(document).height();
//窗口高度
var winHeight = $(window).height();
//文档高度和窗口高度之间差是滚动条的高度
//滚动条可滑动的高度
var scrollTop1 = $(window).scrollTop();
//当窗口高度+滚动条可滑动高度
if(winHeight+scrollTop1 == docHeight){
that.initImg();
}
})
}
}
</script>
</body>
</html>
5.admin.py
admin.site.register(models.Img)
