Example #1

HTML

<div class="js-mansony row" data-masonry='{"percentPosition": true }'>
    <div class="itemMansony col col-sm-6 col-lg-4 mt-4">
        <div class="clearfix" data-aos="fade-up">
            <img alt="img" src="img/portfolio/portfolio-1.jpg"
                 class="img-fluid">
        </div>
    </div>
    <div class="itemMansony col col-sm-6 col-lg-4 mt-4">
        <div class="overflow-hidden" data-aos="fade-up" data-aos-delay="100">
            <img alt="img" src="img/portfolio/portfolio-2.jpg"
                 class="img-fluid">
        </div>
    </div>
    <div class="itemMansony col col-sm-6 col-lg-4 mt-4">
        <div class="overflow-hidden" data-aos="fade-up" data-aos-delay="200">
            <img alt="img" src="img/portfolio/portfolio-3.jpg"
                 class="img-fluid">
        </div>
    </div>
    <div class="itemMansony col col-sm-6 col-lg-8 mt-4">
        <div class="overflow-hidden" data-aos="fade-up" data-aos-delay="100">
            <img alt="img" src="img/portfolio/portfolio-4.jpg"
                 class="img-fluid">
        </div>
    </div>
    <div class="itemMansony col col-sm-6 col-lg-4 mt-4">
        <div class="overflow-hidden" data-aos="fade-up" data-aos-delay="200">
            <img alt="img" src="img/portfolio/portfolio-5.jpg"
                 class="img-fluid">
        </div>
    </div>
    <div class="itemMansony col col-sm-6 col-lg-4 mt-4">
        <div class="clearfix" data-aos="fade-up">
            <img alt="img" src="img/portfolio/portfolio-6.jpg"
                 class="img-fluid">
        </div>
    </div>
    <div class="itemMansony col col-sm-6 col-lg-4 mt-4">
        <div class="clearfix" data-aos="fade-up">
            <img alt="img" src="img/portfolio/portfolio-7.jpg"
                 class="img-fluid">
        </div>
    </div>
</div>