Load many masonry in one page

[yohannbillard]

Hello,

I have a website with some tabs, in each tab content, I have a masonry gallery. I try to load each gallery but only the first is loaded correctly. I search and found a lot of examples but nothing worked.

Here is my HTML

    <div class="elementor-widget-container">
        <div class="elementor-shortcode">
            <div class="grid">
                            <div class="grid-sizer"></div>
                        <div class="gutter-sizer"></div>
                                <div class="grid-item">
                                   <a href="https://www.example.com/img1.jpg" data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="all-lcs">
                    <img src="https://www.example.com/img1.jpg" alt="">
                    </a>
                    </div>
                                <div class="grid-item">
                                   <a href="https://www.example.com/img2.jpg" data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="all-lcs">
                    <img src="https://www.example.com/img2.jpg" alt="">
                    </a>
                    </div>
                    <div class="grid-item">
                                   <a href="https://www.example.com/img3.jpg" data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="all-lcs">
                    <img src="https://www.example.com/img3.jpg" alt="">
                    </a>
                    </div>
                    <div class="grid-item">
                                   <a href="https://www.example.com/img4.jpg" data-elementor-open-lightbox="yes" data-elementor-lightbox-slideshow="all-lcs">
                    <img src="https://www.example.com/img4.jpg" alt="">
                    </a>
                    </div>
            </div>
        </div>
    </div>
</div>

This code in in loop so I have many element like this.

Here is my JS

var msnry;
var n = grids.length;
for(var i = 0; i < n; i++){
    imagesLoaded( document.querySelector('.lcs-masonry-gallery'), function() {
        msnry = new Masonry( grids[i], {
                itemSelector: '.grid-item',
            columnWidth: '.grid-sizer',
        gutter: '.gutter-sizer',
        percentPosition: true,
        horizontalOrder: true,
      });
    });
}

I found this code on previous issue but it doesn't work. Any idea to help me ? Thank you