Multiple masoned containers on a page

[tchopshop]

Forgive me if this is obvious, but I've searched all the issues and examples and cannot find what I need... I'd like to have two different containers "masoned" on the same page... they are separated by a title, so for example I have

Albums

{container with images for albums}

Singles

{container with smaller images for singles}

I don't want the singles overrunning the album section, I need them to stay separated.
thank you,
Elena

[desandro]

No biggie. This is basic HTML & jQuery.

Your HTML should probably look something like

<div id="albums" class="container">
  <div class="album item"></div>
  <div class="album item"></div>
  <div class="album item"></div>
  ...
</div>

<div id="singles" class="container">
  <div class="single item"></div>
  <div class="single item"></div>
  <div class="single item"></div>
  ...
</div>

We have two containers, so we can initialize two instances of Masonry

$(function(){

  $('#albums').masonry({
    itemSelector: '.album',
    columnWidth: 240
  });

  $('#singles').masonry({
    itemSelector: '.single',
    columnWidth: 240
  });

});

If the sizes of the items .album and .single are the same, then you can initalize both one call thanks to jQuery

$('.container').masonry({
  itemSelector: '.item',
  columnWidth: 240
});

[tchopshop]

Thank you so much, you are truly wonderful!

[rbosneag]

What if one needs to specify the parent for multiple containers instead of child elements?
I have a page with 3 tabs and each tab holds a masonry container whose child elements have the same classes applied so we cannot select by bricks (they are defined identical and they share the same page but in different div's). Any workarounds for that?

Great solution for a great product, anyway!