django - 照片网格像新的 flickr 设计 *在 Django 模板中*

Question

我正在尝试在 Django 中执行此操作：Photo grid like the new flickr design

尽管答案是正确的，但我在理解如何在 Django 模板中实现这一点时遇到了问题。想知道是否有人可以帮我填写这个：

1. 选择首选的行高。完毕
2. 获得可用的总宽度DONE
3. 开始新行帮助：对如何使用 django forloop 执行此操作感到困惑，因为 forloops 只是循环遍历整个集合
4. 放入一张照片并将其缩放到行高并检查您的行宽帮助：对如何使用 django forloop 执行此操作感到困惑，因为 forloops 只是循环遍历整个集合
5. 重复 4. 直到添加照片使您的行宽超过总宽度DONE
6. 缩小这一行（和包含的照片）的高度，直到宽度适合DONE
7. 开始下一行（见 3。）帮助：见 #3

一旦我能弄清楚forloop，我应该会没事的。这是我现在使用的基本 forloop：

    {% for photo in photos %}
        <li>
            <a>
                <img height="250" src="{{ photo.thumbnail_image_url }}">
            </a>
        </li>
    {% endfor %}

我假设我需要的输出看起来像这样：

<div>
    <a><img></a>
    <a><img></a>
    <a><img></a>
</div>
<div>
    <a><img></a>
    <a><img></a>
    <a><img></a>
</div>
<div>
    <a><img></a>
    <a><img></a>
    <a><img></a>
</div>