masonry-css

.masonry-grid {
    $gutter-masonry: 30px / 2;
    $nbrColonnes : 2;
    display: block;
    width: auto; // ne pas mettre width 100%
    margin-left: rfs-value(-$gutter-masonry);
    margin-right: rfs-value(-$gutter-masonry);

    &:after {
        content: '';
        display: block;
        clear: both;
    }

    .gutter-sizer{
        width: $gutter-masonry;
    }


    .grid-item,
    .grid-sizer {
        width: 100%;
        padding: rfs-value($gutter-masonry);

        @include media-breakpoint-up(sm) {
            width: 50%;
        }

    }

 

    .grid-item {
        // transition: all ease 1s;
        // transition-delay: 0.5s;
        opacity: 0;
        float: left;

        &.grid-item-loaded {
            opacity: 1;
        }

        img {
            display: block;
            width: 100%;
        }

        &.entered {
            opacity: 1;
        }
    }
}

masonry-js

import Masonry from 'masonry-layout';
import LazyLoad from "vanilla-lazyload";

//https://imagesloaded.desandro.com/ must be install


export function masonryLayout() {

        var imagesLoaded = require('imagesloaded');

        // class of the masonry grid here
        const grid = document.querySelector(".masonry-grid");
        const gridSizer = document.querySelector(".grid-sizer");
        const gridItem = document.querySelectorAll('.grid-item');
        const itemSelector = '.grid-item';

        if (grid) {

            // -------------- use masonry ----

            let masonry = new Masonry(grid, {
                // columnWidth: '.grid-sizer',
                columnWidth: gridSizer,
                itemSelector: itemSelector,
                percentPosition: true,
                // gutter: 30
            });

            imagesLoaded(grid, function () {
                masonry.layout()

                // Add class loaded for animation fade
                for (var i = 0; i < gridItem.length; i++) {
                    gridItem[i].classList.add('grid-item-loaded')
                }

                // $('.grid-loader').fadeOut();
                new LazyLoad({
                    elements_selector: itemSelector,
                    threshold: 200,
                    callback_loaded: masonry.layout(),
                    unobserve_completed: true // Stop observi
                });
            });

            // ------------- end Masonry 
        }
};