瀑布流展示图片
瀑布流
用来图片展示，并且页面往下滚动自动刷新
views.py
def img(request):
return render(request,'img.html')
def get_img(request):
nid = request.GET.get('nid')
img_obj = models.Images.objects.filter(id__gt=nid).values('id','src','title')
img_list = list(img_obj)
ret = {
'status':True,
'data':img_list
}
return JsonResponse(ret)
img.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.m {
width: 1000px;
margin: 0 auto;
}
.item {
width: 25%;
display: inline-block;
float: left;
}
.item img {
width: 100%;
}
</style>
</head>
<body>
<div class="m">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script>
$(function () {
var obj = new ScollImg();
obj.initImg();
obj.scollEvent()
});
function ScollImg() {
this.nid = 0;
this.lastPostion = 3;
this.initImg = function () {
var that = this;
$.ajax({
url: '/get_img.html/',
type: 'GET',
dataType: 'JSON',
data: {nid: that.nid},
success: function (arg) {
var img_list = arg.data;
$.each(img_list, function (index, v) {
var eqv = (index + that.lastPostion + 1) % 4;
var tag = document.createElement('img')
tag.src = '/' + v.src;
$('.m').children().eq(eqv).append(tag);
// 当循环到最后一个图片时，将图片ID赋值给NID
if (index + 1 == img_list.length) {
that.nid = v.id;
that.lastPostion = eqv;
}
})
}
})
};
// 当滚动到达最底部时，执行initImg();
this.scollEvent = function () {
var that = this
$(window).scroll(function () {
// 什么时候到达最底部
// 文档高度
var docHeight = $(document).height();
// 窗口高度
var winHeight = $(window).height();
// 滚动条高度
var scrollTop = $(window).scrollTop();
if (winHeight + scrollTop == docHeight) {
that.initImg()
}
})
}
}
</script>
</html>
