(使用tag记住前端{% load tags %})
1、模板渲染，瀑布流展示数据：
a、就是把数据循环展示出来，展示每个循环单独排列的内容。
b、循环的时候通过取余的方法给数据排列，使展示出来的数据跟横着排列一样
c、需要在后端返回取余的结果，这里不能用simple_tag，因为simple_tag不能放在if后面做条件，simple_filter可以，simple_filter参数只能传两个
前端
{% load tags %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
width: 900px;
margin: 0 auto;
}
.item{
width: 300px;
float: left;
}
.item img{
height: 200px;
width: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
{% for row in person_list %}
{# if后面不能是simple_tag,只能是simple_filter#}
{% if forloop.counter|test:'3,1' %}
<div>
<img src="{{ row.src }}">
<p>{{ row.name }}{{ forloop.counter }}</p>
{{ row.company }}
</div>
{% endif %}
{% endfor %}
</div>
<div class="item">
{% for row in person_list %}
{% if forloop.counter|test:'3,2' %}
<div>
<img src="{{ row.src }}">
<p>{{ row.name }}{{ forloop.counter }}</p>
{{ row.company }}
</div>
{% endif %}
{% endfor %}
</div>
<div class="item">
{% for row in person_list %}
{% if forloop.counter|test:'3,0' %}
<div>
<img src="{{ row.src }}">
<p>{{ row.name }}{{ forloop.counter }}</p>
{{ row.company }}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</body>
</html>
tag
from django import template
register= template.Library()
@register.filter
def test(a1,a2):
n1,n2=a2.split(',')
if a1 % int(n1) == int(n2):
return True
return False
2、ajax
后端返回了个{"status": true, "data": [{"id": 1, "src": "static/images/image/1.png", "title": "\u6469\u6258\u5973"}, {"id": 2, "src": "static/images/image/570fa29545374474f4b6223da6ededbc51106c1efeb5-5JcEC5_fw236.jpg", "title": "\u72ac\u591c\u53c9\u7236\u5b50"}
这样的数据
def image(request):
# image_list=models.Image.objects.all()
return render(request,'image.html')
def get_image(request):
#all()拿到的是queseet的列表套元祖，我们用values得到queryset的列表套字典
image_list=models.Image.objects.values('id','src','title')
# 把类型转换成列表套字典（这里已经不是queryset了）
image_list=list(image_list)
ret={
'status':True,'data':image_list
}
# JsonResponse如果返回列表会报错，需要写成JsonResponse(ret,save=False)
return JsonResponse(ret)
在ajax里拿到index索引取他除四的余，利用eq方法，$('.container').children().eq(eqv).append(tag)，在相应的分组里添加tag=document.createElement("img");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
width: 25%;
float: left;
}
.item img{
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
<script src="/static/js/jquery-3.4.1.js"></script>
<script>
$(function () {
initImag()
});
function initImag() {
$.ajax({
url:'/get_image',
dataType:'JSON',
type:'GET',
success:function (arg) {
var image_list=arg.data;
$.each(image_list,function (index,v) {
var eqv=index%4;
tag=document.createElement("img");
tag.src='/'+v.src;
$('.container').children().eq(eqv).append(tag)
})
}
})
}
</script>
</body>
</html>
3、连续取数据
监控 文档高度、窗口高度、滚动距离顶端，当窗口+滚动=文档，说明到底了
这个时候再执行次initImag();（因为我们数据库没那么多数据，所以我们{#Nid=v.id#}备注了，重复拿那几张照片），
这个时候碰到个问题，比如我们分四列，但是每次7个数据，每次最后一列循环一次就少个数据。所以我们再定一个lastPosition=3，使var eqv=(index+lastPosition+1)%4;这样索引还是0,1,2,3没变，最后lastPosition=eqv，这样下次循环就会从结束的下一个开始。
这里为什么不然lastPosition=0呢，因为为0，那var eqv=(index+lastPosition+1)%4，就会从索引1开始，不是从0 开始了。
<script src="/static/js/jquery-3.4.1.js"></script>
<script>
$(function () {
initImag();
scrollEvent();
});
Nid=0;
lastPosition=3
function initImag() {
$.ajax({
url:'/get_image',
data:{nid:Nid},
dataType:'JSON',
type:'GET',
success:function (arg) {
var image_list=arg.data;
$.each(image_list,function (index,v) {
var eqv=(index+lastPosition+1)%4;
tag=document.createElement("img");
tag.src='/'+v.src;
$('.container').children().eq(eqv).append(tag);
if(index+1==image_list.length){
{#Nid=v.id#}
lastPosition=eqv
}
})
}
})
}
function scrollEvent() {
$(window).scroll(function () {
var scrollTop=$(window).scrollTop();
var docHeight=$(document).height();
var winHeight=$(window).height();
console.log(winHeight)
if (scrollTop+winHeight==docHeight){
initImag()
}
})
}
</script>
