pinterest启发的仪表板布局

Question

Over the weekend we had a massive hackathon in Sweden, and my pitch to the organizers a few weeks ago was to create a pinterest inspired web app for instagram, since they don't have a big web presence.

I am using twitter bootstrap to easy create the layout and wondering how I can perfect that pinterest type layout?

Here is a sample of the loop I am running.

{% 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 %}

Your help is much appreciated.

the address is http://instadashapp.com/

Answer 1

Masonry javascript插件是专门为创建内容网格而编写的，如果您不反对根据需要添加其他插件，则可以填充尽可能多的空格。