Github项目：https://github.com/greyli/image-wall
图片墙Demo：http://fanxiangce.com/demo1（旧Demo）

主要变化

和之前的Python版本相比的变动：

• 实现了上传功能
• 优化了CSS和JS代码
• 简化了页面元素，去掉了没用的赞助页面
• 把HTML分离出Python，代码结构更清晰

实现步骤

1、用户上传图片；

2、生成用户文件夹，重命名图片；

@app.route('/', methods=['GET', 'POST'])
def index():
    # 为每一个用户创建文件夹
    username = hashlib.md5('demo' + str(time.time())).hexdigest()[:7]
    if request.method == 'POST' and 'photo' in request.files:
        amount = len(request.files.getlist('photo'))
    if amount in range(10, 101):  # 控制图片数量在10~100之间
        for num, img in enumerate(request.files.getlist('photo')):
            filename = username + str(num)  # 使用用户名加序号命名图片
            photos.save(img, name=username + '/' + filename + '.')
        return redirect(url_for('image_wall', username=username))
    return render_template('index.html')

3、根据图片数量分配相应的行列图片数量，并为每一张图片生成三维坐标；

4、渲染模板，传入这些坐标；

{% for image in images %}
<div class="step center-text" data-x="{{ image[1] }}" data-y="{{ image[2] }}" data-z="{{ image[3] }}">
    <img class="image" src="{{ url_for('static', filename='photos/') }}{{ image[0] }}">
</div>
{% endfor %}

本来说要好好学习一下前端技术，可没过几天，又开始了堆积木式的创造：把各种JS库，CSS库搭配起来，最终用Python做胶水实现了一个网页相册生成器。顺便用Bootstrap的模板做了一个介绍页：翻相册（fanxiangce.com）。

翻相册

故事还要从我上次做幻灯片讲起。用impress.js做了幻灯片不久，就想着用Python搭配impress.js做一个幻灯片生成器，最终实现的效果是：可以从一个文本文档里读取文本，每一行创建一张幻灯片，坐标可以固定（通过在每一行的结尾传入坐标参数），也可以随机（没解决遮盖问题）。做着做着，发现这并不实用。估计没人愿意用这种死板无聊的幻灯片。没过几天，又想用impress.js搭配csshke做一个记单词的网页程序，几天后因为能力不够被暂时搁置了。

接着，又有了新的想法，在原来的幻灯片生成器的基础上改了改，做成了一个照片墙生成器。原理很简单。就是通过获取图片的数量和文件名，生成足量的坐标，然后用Python生成相应的div，最后连接头尾组成一个完整的HTML文件。做成这样一个照片墙：

点击任一张图片可以拉近，点击相邻图片可以移动位置。

又过了几天，照片墙实现了tooltip功能，可以自动把文件名（没有格式后缀）设为tooltip内容。我想到的一个理想的应用场景是：集体制作照片墙，每个人上传自己的照片给某个人，以自己的名字作为文件名，收集照片的人只需要上传照片，设置标题，然后点击生成。打开后每张照片在鼠标掠过时都会用tooltip显示姓名。像这样：

tooltip的颜色可以自定义。

故事还没完。又过了几天，我买了fanxiangce.com，做了一个粗糙的介绍页。发现功能还太单调，和其他的在线相册相比没有什么吸引力。又实现了立体相册，像这样：

点击任意一张照片可以拉近

随机散落（仍然没有解决遮盖问题），像这样：

随机散落的照片，点击任一张可以拉近

标签云（使用svg3dtagcloud.js）：

基于文本的标签云

点击标签就会打开相应的图片：

使用remodal.js实现的弹窗

现在只是一个简单的demo，未来还会实现很多功能，比如把标签换成图片缩略图。可以参见TagCanvas。

总结

上面的相册都有相应的demo，欢迎到翻相册上体验。也欢迎申请试用。虽然已经花了很多时间在上面，但是要做的事情还有很多。比如实现模拟翻页的相册，让图片更美观的排列，不是单一的对齐。等我暑假学习一下Flask和JS，把网站做出来，顺便把电脑端程序和在线程序做出来，就可以开放注册和在线自动生成相册了。