How to achieve a div tile layout with dynamic heights, not using absolute positioning?

2 Views

I’m interested in seeing how you could run a WordPress Query to accomplish a layout such as this when you grab posts:

http://planetpropaganda.com/#!/blog

Read More

enter image description here

As you can see the boxes have varying heights (mostly because of different excerpt lengths).

What they’ve done looks great, however since the boxes are absolutely positioned, I don’t believe it works well with a responsive layout.

Anyone have a clue?

Post Views: 2

Related posts

Leave a Reply

4 comments

  1. This layout is called Dynamic Grid Layout which (maybe) firstly implemented by Pinterest. People always call id “Pinterest-like Grid Layout”.
    I have a link which give a nice introduction about “Pinterest-like Grid Layout” which may help you understand it.

    And Introduction to Pinterest-Like Dynamic Grid Layout

    and if you use jQuery, you may consider to look at a list which this link has. There are 5 jQuery plugins listed there.

    5 jQuery Plugins to Produce Pinterest Like Dynamic Grid Layout

    If you want to get other resources about how to create that layout, start googling “Pinterest-like Grid Layout”, you’ll find your way.

  2. True, for this layout to be responsive, you have to use JS to reposition them. Similar to Pinterest, those “tiles” are just siblings.

    However, you can use a multi-column aproach. the problem with this one is you need an algorithm to distribute the columns evenly between columns. Pinterest gets away with it by using absolute positioned items.

    for this one, you either have to do this in the server side (but don’t know how long the content is, so you might get unbalanced columns) or do some crazy DOM manipulations (you know the dimensions, but doing stuff in DOM is slow)

    <ul>
    <li class="a3">content</li>
    <li class="a3">content</li>
    <li class="a2">content</li>
    <li class="a1">content</li>
    <li class="a3">content</li>
</ul>
<ul>
    <li class="a1">content</li>
    <li class="a2">content</li>
    <li class="a1">content</li>
    <li class="a3">content</li>
    <li class="a2">content</li>
</ul>

ul{
    float:left;
    width:250px;
}
li{
    background:#ccc;
    margin: 0 20px 20px 0;
}
/*let's simulate varying content height*/
.a1{
    height:150px;
}
.a2{
    height:300px;
}
.a3{
    height:450px;
}

    ​