[Javascript] Masonryのitemの小要素をimgタグにして高さを可変にする方法

hoverしてオーバーレイで何か表示したいときなど、⇣のように画像をdivでラップしたDOMの構成にしたい。

<div class="masonry">
  <div class="item">
    <img src="https://placehold.it/200x200" />
  </div>
  <div class="item">
    <img src="https://placehold.it/200x200" />
  </div>
  <div class="item">
    <img src="https://placehold.it/200x200" />
  </div>
</div>

デフォルトの設定だと画像の高さが反映されず、レイアウトが崩れるので、
公式に従うと、imagesloaded を使えば解決できる
https://masonry.desandro.com/layout.html#imagesloaded

jQuery

// init Masonry
var $grid = $('.grid').masonry({
  // options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});

Vanilla JS

// import imagesLoaded anywhere

imagesLoaded(container, function () {
  var msnry = new Masonry(container, {
    columnWidth: 200,
    itemSelector: '.item'
  });
});

react-masonry-component

<Masonry
    className={'my-gallery-class'}
    options={masonryOptions}
    disableImagesLoaded={false} // ここをfalseにする（デフォルト）
    updateOnEachImageLoad={true} // ここをtrueにする（デフォルトはfalse）
>
    {childElements}
</Masonry>