Images loaded. How to connect it?

Question

JavaScript

Header code:

<script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
var $container = $('#page').masonry({
      itemSelector: '.post',
      isResizeBound: false
    });;
$container.imagesLoaded( function() {
  $container.masonry();
});
  });
  </script>

Calling masonry on the page:

<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>
<div id="container">
<?php foreach($slide['options']['image_slider'] as $image) : ?>
<div class="item"><a href="<?php echo $image; ?>" rel="lightbox[roadtrip]"/><img  src="<?php echo $image; ?>"/></a></div>
<?php endforeach; ?>	
</div></div>

connection in function.php

wp_enqueue_script('jquery-min-js', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">', '', false, true);
wp_enqueue_script('imagesloaded-pkgd-js', THEMEROOT . '/js/imagesloaded.pkgd.js', array('jquery'), false, true); 
wp_enqueue_script('masonry-pkgd-js', THEMEROOT . '/js/masonry.pkgd.js', array('jquery'), false, true);

I'm playing for the second time and I can't figure out why the images overlap each other in masonry. The solution is said in Images loaded. But it doesn't help. What am I doing wrong?

Answer 1

<div class="item"><a href="<?php echo $image; ?>" rel="lightbox[roadtrip]"/><img  src="<?php echo $image; ?>"/><b></li></b></a></div>

why do you use the closing li tag?

Answer 2

Start by including all scripts at the bottom of the page, before the closing tag </body>
Initialize the code not:
a:
and, rather than write a ton of code here, upload an example somewhere and give a link

Answer 3

The fact is that with each update, the images line up in a new way.
pixs.ru/showimage/11jpg_8311856_10137743.jpg
such a situation is happening.

Answer 4

You are calling masonry twice. Necessary

<script src="imagesloaded.pkgd.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#page').imagesLoaded(function () {
            $('#page').masonry({
                itemSelector: '.post',
                isResizeBound: false
            });
            ;
        });
    });
</script>

And don't link scripts directly to GitHub