In my ST2 app I have on index.html

<script id="jquery" type="text/javascript" src="resources/js/jquery-1.8.2.js"></script>
<script id="masonry" type="text/javascript" src="resources/js/masonry-2.1.5.js"></script>

as well as

<script>

$(document).ready(function(){
    var $container = $('.x-list-container');            
    $container.imagesLoaded(function(){                 
        $container.masonry({
        itemSelector: '.x-list-item',
        });
    });
});

</script>

My front page on the app is a list so it wraps elements as such

<div class="x-list-container">
    <div class="x-list-item"></div> // 'x-list-item' is the block I want to float
    <div class="x-list-item"></div>
    ...
</div>

However once everything is loaded and I inspect .x-list-item there is no style positioning the div. I am experience with Masonry on regular web app but can;t make it work here.

It's like Masonry isn't running at all.

It is being loaded (checked on the network tab) and jQuery is being loaded (on network tab and tested using if (jQuery) {alert('hey there');.

Any idea what I'm doing wrong? }