jQuery Masonary Stacking

3 Views

I am attempting to use the jQuery plugin that comes with WordPress. I can get the images to “float” next to each other but they appear stacked(Image Here) and I am not sure why. Here is my markup 

<div id="container-masonry"> 
    <?php //WordPress Loop Starts ?>    

    <div class="brick">
        <?php the_post_thumbnail(); ?>

        <h3><a href="<?php the_permalink();?>"><?php the_title(); ?></a></h3>
    </div> <!-- END .brick -->

    <?php //END loop ?>
</div> <!-- END #container-masonry -->

I am calling the javascript files from WordPress like so

Read More
function mason_script() {
wp_enqueue_script( 'jquery-masonry' );
}
add_action( 'wp_enqueue_scripts', 'mason_script' );

and finally the jQuery like so 

<script>
jQuery(document).ready(function($){
    $('#container-masonry').masonry({
      itemSelector: '.brick',
      });
});
</script>

I am not getting any errors in the dev tools and it seems like it is somewhat working but not adding the height. Any help would be greatly appreciated.

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. I recently had the same problem while adding dynamic content. Give this a shot:

    var $container = $('#container-masonry');

$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.brick'
    });
});

    By structuring the code this way, the imagesLoaded callback will be executed once the images are loaded inside of your container. This allows masonry to accurately determine where the images should be placed.