pinterest 启发的仪表板布局

Question

周末我们在瑞典举办了一场大型黑客马拉松，几周前我向组织者提出的建议是为 instagram 创建一个受 pinterest 启发的网络应用程序，因为他们没有很大的网络存在。

我正在使用 twitter bootstrap 轻松创建布局，想知道如何完善 pinterest 类型的布局？

这是我正在运行的循环的示例。

{% for obj in images %}
    <div class='span3'>
        <div class='thumbnail'>
            <img src="{{ obj.images.low_resolution.url }}" href="{% url dashboard_get_media obj.id %}" data-toggle="modal" data-target="#myModal"/><br />
            <div class='social-items'>
                ...
            </div>
            <br />
            <div class='clearfix'></div>
            <div class='comment'>
                ...
            </div>
            <div class='clearfix'></div>
            {% for comment in obj.comments %}
                ...
                <div class='clearfix'></div>
            {% endfor %}
        </div>
        <br />
    </div>
{% endfor %}

非常感谢您的帮助。

地址是http://instadashapp.com/

Answer 1

Masonry javascript plugin 专门用于创建一个尽可能多地填充空白的内容网格，如果您不反对包含另一个插件来满足您的需求。