--- title: jQuery Masonry Ordered layout: default category: home mini_bricks: - w: 9 h: 4 - w: 4 h: 6 - w: 4 h: 4 - w: 6 h: 4 - w: 4 h: 4 - w: 7 h: 4 - w: 4 h: 4 - w: 4 h: 6 - w: 4 h: 5 - w: 4 h: 4 - w: 4 h: 7 - w: 9 h: 4 - w: 4 h: 4 ---
Alternative layout strategy for jQuery Masonry
Keeps the items in original order

← View docs and demos
Before: Masonry
{% for brick in page.mini_bricks %}
{{ forloop.index }}
{% endfor %}
After: Ordered
{% for brick in page.mini_bricks %}
{{ forloop.index }}
{% endfor %}

What?

David DeSandro's jQuery Masonry loops through the items and places each as close to the top as possible.

JQuery Masonry Ordered tries to preserve the previous/next relationship of the elements in the sequence.

Is there a tradeoff?

Yes, Masonry Ordered usually takes up visibly more vertical space.