jQuery,Masonry,imagesloadedで画像を敷き詰める

HTML

<div id="grid">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
  <div class="grid-item"><img src="../images/1.jpg"></div>
  <div class="grid-item"><img src="../images/2.jpg"></div>
  <div class="grid-item"><img src="../images/3.jpg"></div>
  <div class="grid-item"><img src="../images/4.jpg"></div>
  <div class="grid-item"><img src="../images/5.jpg"></div>
  <div class="grid-item"><img src="../images/6.jpg"></div>
  <div class="grid-item"><img src="../images/7.jpg"></div>
  <div class="grid-item"><img src="../images/8.jpg"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

javascript

<script>
// init Masonry
    var $grid = $('#grid').masonry({
        percentPosition: true,
        columnWidth: '.grid-sizer',
        itemSelector: '.grid-item',
        gutter: '.gutter-sizer'
    });

// layout Masonry after each image loads
    $grid.imagesLoaded().progress(function () {
        $grid.masonry('layout');
    });
</script>

css

#grid {
    margin: 0 auto;
    width: 1000px;
}
.grid-sizer,
.grid-item {
    width: 32%;
    margin-bottom: 20px;
}
.grid-item img {
    width: 100%;
    height: auto;
}
.gutter-sizer {
    width: 2%;
}

@media screen and (max-width: 768px) {
  .grid-sizer,
  .grid-item {
      width: 48.5%;
      margin-bottom: 10px;
    }
}