照片瀑布流排版

作者: 两点半的杂货铺 | 来源:发表于2018-03-04 11:24 被阅读183次

照片瀑布流排版
Android瀑布流图片显示-StaggeredGridView
瀑布流照片墙布局
本地plist文件实现瀑布流照片墙
Flutter携程App旅拍页面
瀑布流的三种实现
瀑布流布局的学习
iOS瀑布流
「实战」蘑菇街 PC 端首页，瀑布流布局的实现原理与细节技巧
Android RecycleView瀑布流的间隔问题

一.利用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();
            }
        })
        }
    }