Masonry.js only outputs vertically and has display:block;

Question

I've installed Masonry.js to create each item I have as a grid (in time these items will have different heights hence use of Masonry).

However, it doesn't seem to be doing anything really, just stacking each item and giving it a width of 25%. I've worked through the getting started steps but it seems this doesn't really do anything?

Live demo

/* Init masonry */
    var container = document.querySelector('#container');
    var msnry = new Masonry( container, {
      // options
      gutter: 10,
      itemSelector: '.item'
    });


<div id="container" class="js-masonry" data-masonry-options='{ "gutter": 10 }'>
      <div class="item"></div>
</div>

Answer 1

Masonry is being called before your ajax request completes. The script should run after all of your items are created in the DOM. You can do this by adding it inside the 'complete' property of ajax(). Also, a columnWidth should be specified.

So, in your demo page, you'll want to move lines 19-25 down to line 33 of your code like this:

jQuery(function () {
    $.ajax({
        url: 'http://www.sagittarius-digital.com/news.rss',
        dataType: 'xml',
        complete: function() {
       /* Init Masonry */    
       var msnry = new Masonry( container, {
           // options
           gutter: 10,
           itemSelector: '.item',
          // Add a column width
           columnWidth: 50
        });  
    }
})...

Also, be sure not to leave out the comma after the dataType property.