CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Olen
Olen

Reputation: 1185

Bootstrap with Masonry

The scenario

The site is built with Bootstrap, and has several div's (or columns) with a variation in height.

My HTML basically looks like this:

<div class="container">
      <div id="masonry-container" class="row">
           <div class="item col-lg-3 col-md-4 col-sm-3 col-xs-12">
                <!-- Text and so on -->
           </div>
      </div>
</div>

The problem

The problem is that Bootstrap does not work very well with columns when they have different heights. This is a common problem, please see example below, or visit my page.

enter image description here

What I am working on

I am trying to include Masonry with Bootstrap so that the columns are correctly aligned when the heights are different. The columns from the example above would then look like this:

enter image description here

However, I can't get it to work correctly. I am not sure if I am doing something wrong, or if I have missed something.

I am using the Masonry min (here)

I have tried loading it with functions.php by the following:

//Isotope and masonry
function add_isotope() {
    wp_register_script( 'isotope', get_template_directory_uri().'/js/isotope.pkgd.min.js', array('jquery'),  true );
    wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope.js', array('jquery', 'isotope'),  true );
    wp_enqueue_script(  'masonry_js', 'http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js', array('jquery'), true  );
    wp_enqueue_script('isotope-init');
}

add_action( 'wp_enqueue_scripts', 'add_isotope' );

I have also tried to include it the regular way in header.php: 

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/masonry.pkgd.min.js"></script>

However, nothing seems to work.

Could you please provide a working solution?

The page can be found here.

Upvotes: 1

Views: 586

Answers (1)

Adam Azad
Adam Azad

Reputation: 11297

I don't think you're calling $.masonry(). I looked up the source code, nothing seemed to bind #masonry-container. So, add this snippet to your pages' footer.

$('#masonry-container').masonry({
  itemSelector: '.item' // div.item
});

And because you're working with a responsive layout here, you should use reload method like below

$('#masonry-container').masonry({
        itemSelector: '.item',
        isAnimated: true // the animated makes the process smooth
});
$(window).resize(function() {
    $('#masonry-container').masonry({
        itemSelector: '.item',
        isAnimated: true
    }, 'reload');
});

Upvotes: 4

Related Questions