Bootstrap + Masonry

JavaScript
1

I am in the VERY early stages of designing my latest site. I am newer to JQuery and have decided on Bootstrap as my framework.

I want to use masonry, but have not been successful to this point. I have searched Google and tried several iterations and I never seem to get it working. Therefore I have stripped all Masonry from my site and decided to reach out to the community to see if you could help.

Here are the ones I have found… none of which provide explanation of what they are doing to make it work, but when I would add it to my site and try it out, the results remained the same.

http://www.maurizioconventi.com/2012/06/19/responsive-example-integrating-twitter-bootstrap-and-jquery-masonry/

Even looked at using Isotope with Bootstrap, but I can’t get it to work without the content being brought in as it does with Reddit: http://mpezzi.github.io/bootstrap_isotope/

When I tried it with the native content by stripping out all the JS that brought in Reddit articles, it would not work.

Here is my site (as I stated, I stripped it all out). If someone could just explain the underlying issue with why Bootstrap and Masonry don’t like each other, I can probably figure it out from there.

http://deadradioentertainment.com/dre-test/

2

Looking at the HTML for the page, your structure at the moment is like this:


<div class="container" id="content">
    <div class="row">
        <div class="span8" id="mainContent">

            <div id="posts" class="isotope row">

                <!-- POSTS HERE -->

            </div>
        </div>

        <div class="span4" id="sidebar">
            <div class="row">

                <!-- POSTS HERE -->

            </div>

        </div>
    </div>
</div>

The problem is that your posts are separated into a main div and a sidebar… for Masonry to work you need to have the posts together in one container element. I managed to get it to work by changing the HTML like this:


<div class="container" id="content">
    <!-- POSTS HERE -->
</div>

and calling Masonry like this:


$('#content').masonry({
    // options
    itemSelector : '.isotope-item',
    columnWidth : 390
  });

I had to change the margins on the post items to be 10px (on all sides), to be able to fit 3 columns inside the container (hence the columnWidth: 390 setting above).

3

My apologies… I forgot one point. The posts that will be in the sidebar are going to be separated from the main posts. The Main Content is for random blog posts, the sidebar is going to have a different look and be the Podcasts only. At first I wasn’t sure how I wanted the podcasts to look, just that they would be in a column all their own.

So I only want the #mainContent to be a 2 column Masonry affect.

The other thing to consider is that bootstrap will be changing the widths via Media Queries. So to hold it to a width of 390px is going to be tough. I believe the points are following: 370, 300, 228, and then it pulls itself into a single column width varying to fit screen at that point.

4

In that case, leave the HTML as-is, and just call Masonry with these options:


('#posts').masonry({
    // options
    itemSelector : '.isotope-item',
    columnWidth : 400
  });

Edit:
In fact, you could use ‘.post’ as your itemSelector and do away with the .isotope-item class altogether (assuming the only reason it’s there is for the stacking library to hook into).

5

Sorry, I hadn’t spotted that bit about the media queries… according the Masonry docs, you can use a function to adjust the column width dynamically:


columnWidth: function( containerWidth ) {
    return containerWidth / 2;
  }
6

That did the trick. I think I was making it too difficult on myself. It was the columns that were screwing me up. When I went to the other solutions, they were doing more than they needed to to make it work.

Thanks for the help.