Django瀑布流方式展示图片

一 引入瀑布流插件

1 插件来源

https://github.com/jmlp-131092/mp-mansory.js

2 将highcharts_guage_solid.html文件复制到mysite/static/js/目录中

3 编写mysite/static/css/mansory-style.css，内容如下：

3 编写mysite/static/css/mansory-style.css，内容如下：
#my-gallery-container {
    background-color: #ededed;
}

.falls_item {
    border: #c6c6c6 2px solid;
    width: 100%;
    background-color: white;
    min-height: 100px;
    padding: 5px;
    margin: 10px 0px;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 2px;
    border-radius: 4px;,
    
}

.falls_item:hover {
    opacity: 0.5;
}

.falls_item.h150{
    width: 100%;
    min-height: 150px;
}

.falls_item.h200{
    width: 100%;
    min-height: 200px;

}

.falls_item.h250{
    width: 100%;
    min-height: 200px;
}
.falls_padding{
    padding: 10px 5px;
}
.falls_item img {
    max-width: 100%;
}

二 编写视图函数

def falls_images(request):
    images = Image.objects.all()
    return render(request, 'image/falls_images.html', {"images": images})

三 配置URL

from django.conf.urls import url
from . import views

urlpatterns = [
    # 展示图像列表
    url(r'^list-images/$', views.list_images, name="list_images"),
    # 上传图片
    url(r'^upload-image/$', views.upload_image, name='upload_image'),
    # 删除图片
    url(r'^del-image/$', views.del_image, name='del_image'),
    # 瀑布流
    url(r'^images/$', views.falls_images, name="falls_images"),
]

四 增加入口mysite/templates/header.html

<!--模板中声明引入静态文件的标签，只有使用它,static标签才能使用-->
{% load staticfiles %}
<div class="container">
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="https://blog.csdn.net/chengqiuming"><img src="{% static '/images/logo.png' %}" width="100px"></a>
        </div>
        <div>
            <ul class="nav navbar-nav" role="navigation">
                <li><a href="{% url 'home' %}">主页</a></li>
                <!--blog是urlpatterns中定义的namespace，blog_title是视图函数-->
                <li><a href="{% url 'blog:blog_title' %}">博客</a></li>
                <li><a href="{% url 'article:article_titles' %}">文章</a></li>
                <li><a href="{% url 'image:falls_images' %}">美图</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right" style="margin-right:10px">
                {% if user.is_authenticated %}
                <li>
                    <div class="dropdown" style="margin-top:8px">
                        <button class='btn btn-default dropdown-toggle' type='button' id='dropdownMenu' data-toggle='dropdown'>{{ user.username }}<span class='caret'></span></button>
                        <ul class="dropdown-menu">
                            <li><a href="{% url 'account:password_change' %}">修改密码</a></li>
                            <li><a href="{% url 'account:my_information' %}">个人信息</a></li>
                            <li><a href="{% url 'article:article_column' %}">后台管理</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">{{ user.username }}</a></li>
                <li><a href="{% url 'account:user_logout' %}">退出</a></li>
                {% else %}
                <li><a href="{% url 'account:user_login' %}">登录</a></li>
                <li><a href="{% url 'account:user_register' %}">注册</a></li>
                {% endif %}
            </ul>
        </div>
    </nav>
</div>

<script src="{% static 'js/jquery.js'%}"></script>
<script src="{% static 'js/bootstrap.js' %}"></script>

五 创建模板文件

{% extends "base.html" %}
{% load staticfiles %}
{% block title %}图像{% endblock %}
{% block content %}

<div class="container">
<link rel="stylesheet" href="{% static 'css/mansory-style.css' %}" type="text/css" />
<div id="my-gallery-container">
  {% for image in images %}
    <div class="falls_item h200" data-order="{{image.id}}">
        <img src="{{ image.image.url }}">
        <p>{{ image.title }}</p>
    </div>
  {% endfor %}
</div>
</div>
<script src='{% static "js/jquery.js" %}'></script>
<script src="{% static 'js/mp.mansory.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/layer.js'%}"></script>
<script type="text/javascript">
    jQuery(document).ready(function ( $ ) {
        $("#my-gallery-container").mpmansory(
            {
                childrenClass: 'falls_item', // default is a div
                columnClasses: 'falls_padding', //add classes to items
                breakpoints:{
                    lg: 3,
                    md: 4,
                    sm: 6,
                    xs: 12
                },
                distributeBy: { order: false, height: false, attr: 'data-order', attrOrder: 'desc' }, //default distribute by order, options => order: true/false, height: true/false, attr => 'data-order', attrOrder=> 'asc'/'desc'
            }
        );
    });
</script>
{% endblock %}

六 测试