javascriptwordpressimagemasonryimagesloaded

The masonry bricks are stacked together until page resize on Wordpress

I found actually a few questions about this on StackOverflow but they didn't resolve my problem, so I'm trying asking here.

When I load the page all the masonry bricks are stacked all together in the top/left of the window. When I resize the page they arrange in their correct position. I'm using javascript in a page of Wordpress. This is the code at the bottom of the page:

<script src="http://www.bitumephotofest.it/wordpress/wp-content/themes/sequential/js/masonry.pkgd.min.js"></script>

<script>
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 10,
  itemSelector: '.item'
});
</script>

I undestrood from previous questions on StackOverflow that I have to use "imagesLoaded()". But where and how should I add it? I'm a novice in javascript.

Any suggests?

Solution

  • It's difficult to know without an example URL but try:

    <script>
$(document).ready(function() {
  var container = document.querySelector('#container');
  var msnry = new Masonry( container, {
  // options
  columnWidth: 10,
  itemSelector: '.item'
  });
});
</script>