Masonry and imagesLoaded error - jquery-masonry

Question

I combined masonry with imagesLoaded like this:
var container = document.querySelector('.masonry-container');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
var msnry = new Masonry( container, {
itemSelector: '.masonry-item'
}).resize();
});
But getting error: Uncaught TypeError: Cannot read property 'length' of null
What am I doing wrong.
Edit
I'm having two masonry calls, maybe that causes problem, another one is the same, one after another:
var container = document.querySelector('.gallery');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
var msnry = new Masonry( container, {
itemSelector: '.gallery-item'
}).resize();
});

Answer 1

You have multiple errors in your jsfiddle which I assume are in your page as well. First, id's are unique, you can't have multiple id's of the same name (id="galery-item"). Your calling masonry on ".gallery" yet you only have the id="gallery", no class="gallery", and finally you set your itemSelector: '.gallery-item', yet even if you had the figures set as a class, you have it called galery-item.
Here is a working jsfiddle with classes and id's set correctly.
js:
var container = document.querySelector('.gallery');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
var msnry = new Masonry( container, {
itemSelector: '.galery-item'
});
});
working html:
<div id="gallery" class="gallery">
<figure class="galery-item">
<figcaption>
<img src="http://placehold.it/150x150">
</figcaption>
</figure>
<figure class="galery-item">
<figcaption>
<img src="http://placehold.it/150x150">
</figcaption>
</figure>
<figure class="galery-item">
<figcaption>
<img src="http://placehold.it/150x150">
</figcaption>
</figure>
<figure class="galery-item">
<figcaption>
<img src="http://placehold.it/150x150">
</figcaption>
</figure>
<figure class="galery-item">
<figcaption>
<img src="http://placehold.it/150x150">
</figcaption>
</figure>
</div>

Answer 2

Found a problem. In masonry call I had var container twice which just overwrites one another. Ex. in specific page I just had div with class .gallery but not .masonry-container, and var container is overwritten with .masonry-container which doesn't exists, so it returns null. Solution is:
var $container = $('.masonry-container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.masonry-item'
});
});
var $container2 = $('.gallery');
$container2.imagesLoaded(function(){
$container2.masonry({
itemSelector : '.gallery-item'
});
});
As seen here: Using jQuery Masonry Many times in the same site