5.2 展示图片

已经完成了用户收集图片的功能，下面就是展示图片，允许用户浏览并查看图片的详细内容，如下图所示。

5.2.1 瀑布式方式展示图片

“瀑布流”是一种网站页面布局方式，在视觉上表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，之后逐渐在我们流行起来。

当然，网页展示是多变的，在这里笔者使用了瀑布流的方式展示图片，并不意味着在日后还流行这种用法，而且“瀑布流”本身的布局样式也有变化，比如图片是参差不齐的还是整齐排列的等。这里仅仅是一个样例罢了。

此处我们使用来自https://github.com/jmlp-131092/mp-mansory.js的插件，实现了以瀑布流方式展示用户所收集的各种图片。随着需求和技术的变化，已经发展出更多的瀑布流布局方式，读者如果不喜欢此处选择的插件，可以使用其他插件，使用方法都是类似的。

首先下载上述插件，将其中的mp.mansory.min.js文件复制到./static/js目录中，然后在./static/css目录中创建mansory-style.css文件，并输入如下代码（根据原插件的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%;
}

之所以用上述代码而不使用元插件中的style.css文件，是因为原文件中的样式表名称跟本项目中已经使用的bootstrap.css有重复，如果使用就会覆盖原有名称。为此，在这里重写了该文件，并重新命名。读者可以根据自己的实际情况酌情处理。

实现瀑布流方式的展示，也是从编写视图函数开始的。

在./image/views.py文件中增加如下视图函数的代码。

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

 然后在./image/urls.py文件中增加一个URL配置，代码如下。

path('images/',views.falls_images,name="falls_images"),

在本项目的导航栏中已经有“文章”栏目，现在增加“美图”栏目。编辑./templates/header.html文件中导航部分的代码。

<ul class="nav navbar-nav" role="navigation">
     <li><a href="{% url 'home' %}">HOME</a> </li>
     <li><a href="{% url 'blog:blog_title' %}">BLOG</a> </li>
     <li><a href="{% url 'article:article_titles' %}">文章</a> </li>
     <li><a href="{% url 'image:falls_images' %}">美图</a> </li> #①
</ul>

语句①是新增加的展示图片的功能。单击“美图”即可看到以瀑布流方式展示的所有用户收集的图片。

在./templates/image目录中创建falls_images.html文件，这就是瀑布流方式展示图片的界面，其代码如下。

{% extends "base.html" %}
{% load staticfiles %}
{% block title %}Images{% 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-3.3.1.js' %}"></script>
<script src="{% static 'js/mp.mansory.min.js' %}"></script>
<script type="text/javascript">
    jQuery(documnet).ready(function($){
        $("#my-gallery-container").mpmansory(
            {
                childrenClass:'falls_item',
                columnClass:'falls_padding',
                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 %}

这个界面的写法参考了https://github.com/jmlp-131092/mp-mansory.js提供的样例，读者可以根据自己对此插件的理解，编写自己所需的瀑布流样式。

完成上述代码之后，检查Django服务是否已经启动，访问http://127.0.0.1:8000/image/list-images/，如果已经收集了若干张图片，就可以看到类似如下图所示的效果。

 

 

这就是瀑布流方式展示的图片。

再进一步，还可以查看每张图片的详细信息。

5.2.2 查看图片的详细信息

前面以瀑布流方式列出了所有图片，如果要查看每张图片的详细信息，一种方法是用本书前文中所讲述的类似查看文章详细内容的方法，这种方法此处不再重复，请读者自己完成。下面我们使用另外一种纯粹前端的方法来查看图片的完整信息。

在./templates/image/falls_images.html文件中找到下面这段代码：

<div class="falls_item h200" data-order="{{image.id}}">
    <img src="{{ image.image.url }}">  #①
    <p>{{ image.title }}</p>
</div>

用下面的代码替换语句①：

<a href="javascript:void(0)" onclick="displayImage('{{image.user}}', '{{image.title}}','{{image.image.url}}', '{{image.description}}','{{request.get_host}}')">
     <img src="{{ image.image.url }}">
</a>

这里主要是在<a>标签中增加了一个onclick方法，即displayImage()函数，并且向这个函数传递了一些值，请读者注意传值的方式，没有直接使用诸如{{image.user}}的方式，而是使用了‘{{image.user}}’的方式（外层加一对单引号），其目的在于向displayImage()传递字符串。

然后在本文件中编写JavaScript函数displayImage()。

因为要实现单击某图片后在弹出层展示该图片详细信息的功能，所以再次使用熟悉的弹出层插件，代码如下。

<script type="text/javascript" src='{% static "js/jquery-3.3.1.js" %}'></script>

下面是displayImage()的代码，也放在本文件的<script></script>内。

function displayImage(user, title, url, description, host){
    layer.open({
        type: 1,
        title: title,
        skin: 'layui-layer-rim', //加上边框
        area: ['800px', '800px'], //宽高
        content: '<div class="text-center"><img src="http://'+host+url+'"><p> 发 布 者 :'+user+'</p></div><div style="margin-left:10px;">'+description+'</div>',
    });
}

检查Django是否运行了，然后访问http://127.0.0.1:8000/image/images/，单击某图片，即可查看该图片的详细信息，如下图所示。

 

虽然我们处在所谓的“读图年代”，甚至是“读视频”，但要想成为这个时代中的佼佼者，还必须读书。

5.2.3 知识点

1、关于JavaScript

做Web开发，如果不使用JavaScript，一些很酷的效果就难以实现了。首先要非常明确地说明，JavaScript和Java在名字上有点像，在语法上也有相似的地方，但也仅仅是“看上去像”，不要认为JavaScript是从Java演化来的。事实上，JavaScript语言在设计方面主要受到了Self和Scheme两种语言的影响。

JavaScript诞生于网景公司，虽然现在很多人已经不知道历史上的这家公司了，但是JavaScript广为传播，所以使用它的时候请在心理默默感谢网景公司和发明者布兰登·艾克（当时就职于网景公司）。

JavaScript被大量用在Web开发中，它不需要进行编译，是一种解释性的脚本语言，可以实现与HTML的交互，并且直接嵌入HTML页面中，可以单独成为一个单元(比如单独的.js文件），且实现了结构和行为的分离。一般情况下，可以用它完成如下工作（源自维基百科）。

• 在HTMLL页面加入动态文本。
• 浏览器事件做出响应。
• 写HTML元素。
• 数据被提交到服务器之前验证数据。
• 检测访客的浏览器信息。
• 制作cookies，包括创建和修改等。

为了使开发更加便利，聪明的程序员们制作了各种“轮子”，并且开源。因此，对于使用者来说，不仅要了解JavaScript，还要知道各种“轮子”，jQuery就是其中一个。

jQuery是一个JavaScript库，它大大简化了JavaScript编程，故用户很容易学会。jQuery官方网站是http://jquery.com

除jQuery外，还有很多，可谓多如牛毛，读者要实现某个功能，最好先到网上搜索一下，看看是否有“轮子”可以拿过来使用。这几年有一个名为React的库（源码在https://github.com/facebook/react），宣称“简单、组件化、学一次各处可用”。不仅如此，它还衍生出了React Native，可用来编写手机上的APP代码。

在浏览器端，JavaScript“带领”它的众多库，横扫天下，但它并没有满足，凭借Node.js进军了服务器端，真的是什么也挡不住了。

Node.js就是运行在服务器端的JavaScript，是Chrome JavaScript运行时建立的一个平台，还是一个事件驱动I/O服务端的JavaScript环境，基于Google的V8引擎。V8引擎执行JavaScript的速度非常快，性能非常好。运行Node.js的服务器能支持数万个并发链接。读者如果觉得Node.js也值得学，可以参考官网https://nodejs.org/en/。

千里之行始于足下，不管学哪个JavaScript框架，都要从JavaScript入手。