瀑布流1.模板渲染tag实现,2.ajax实现

(使用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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容