一.利用filter 标签（简单，但影响运行）
-
html 分析
image.png
整个页面分为行，且每行想紧凑，当每列和每行之间没有空隙，就说明整个页面的布局是一个大的div嵌套了四个小的div，布局的页面代码展示
①最外层div设置指定宽度
②将内层的div宽度设好平均值，设置他们的float属性
③设置照片的百分比宽度
{% load fittlertag %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outter{
width: 100%;
margin: 0;
}
.item{
width: 25%;
float: left;
}
.item img{
width: 100%;
}
</style>
</head>
<body>
<div></div>
<div class="outter">
<div class="item"></div>
<div class="item"></div>
<div class="item"> </div>
<div class="item"></div>
</div>
</body>
</html>
-
照片显示思路
如何让照片显示在对应的div上，一般用余数的方法，照片的数量是固定，也就是照片除以我们的组数，余数对应到相关的div上就可以
django 没有提供页面求余数的方法这里需要我们自定义fittler计算
-
自定义过滤器
① 在对应的app中创建templatetags文件
②在文件下创建.py文件
③写我们的自定义函数
from django import template
register = template.Library()
@register.filter
def mod_imgnum(forloop_count,div_num):
return forloop_count%div_num
- 整体页面效果
<div class="outter">
<div class="item">
{% for i in obj_img %}
{% if forloop.counter|mod_imgnum:4 == 1 %}
<img src="/{{ i.src }}">
{{ i.title }}
{% endif %}
{%endfor %}
</div>
<div class="item">
{% for i in obj_img %}
{% if forloop.counter|mod_imgnum:4 == 2 %}
<img src="/{{ i.src }}">
{% endif %}
{%endfor %}
</div>
<div class="item">
{% for i in obj_img %}
{% if forloop.counter|mod_imgnum:4 == 3 %}
<img src="/{{ i.src }}">
{% endif %}
{%endfor %}
</div>
<div class="item">
{% for i in obj_img %}
{% if forloop.counter|mod_imgnum:4 == 0 %}
<img src="/{{ i.src }}">
{% endif %}
{%endfor %}
</div>
</div>
二、通过js 的方法来构造图片展示
思路做一个接口，这个接口用ajax来接受返回信息
<div></div>
<div class="outter">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</body>
<script src="/static/juery/jquery-1.12.4.js"></script>
<script>
$.ajax({
url:'/getimg/',
type:'GET',
dataType:"JSON",
success:function (arg) {
if(arg.status){
var img_list = arg.data;
$.each(img_list,function(index,v){
var eqv = index%4;
var divd = $('.outter').children().eq(eqv)
var tag = document.createElement('img')
tag.src="/"+v.src
divd.append(tag)
})
}
}
})
</script>
</html>
- views
from django.http import JsonResponse可以自动json转换
from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
# Create your views here.
from cm import models
def img(request):
return render(request,"index.html")
def get_img(request):
ret = {'status':True,'data':None}
try:
obj_img = models.Img.objects.values('id','src','title','summary')
print(obj_img)
ret['data'] = list(obj_img)
except:
ret['status'] = False
return JsonResponse(ret)
-
js最终版本
image.png
$(function () {
var obj = new ScrollImg()
obj.initImg();
obj.scrollEvent();
})
function ScrollImg(){
this.nid = 0;
this.lastPostion =3;
this.initImg = function (){
var that = this;
$.ajax({
url:'/getimg/',
type:'GET',
data:{"nid":NID},
dataType:"JSON",
success:function (arg) {
if(arg.status){
var img_list = arg.data;
$.each(img_list,function(index,v){
var eqv = (that.lastPostion+index+1)%4;
console.log(eqv)
var divd = $('.outter').children().eq(eqv)
var tag = document.createElement('img')
tag.src="/"+v.src
divd.append(tag)
//当列表的长度等于循环的index+1时候执行下一次循环
if(index+1==img_list.length){
//that.nid = v.id
that.lastPostion =eqv;
}
})
}
}
})
};
this.scrollEvent = function () {
var that =this;
$(window).scroll(function () {
//什么时候到达底部
//文档内容高度
var docHeight = $(document).height()
//窗口的高度
var winHeight = $(window).height()
//滑轮滚动高度
var scrollTop = $(window).scrollTop();
//滚动条长度+窗口高度等于 文本高度
if (winHeight+scrollTop == docHeight){
console.log(1)
ininImg();
}
})
}
}
