Các bạn có thể tải plugin Masonry tại đây hoặc vào trang chủ của https://masonry.desandro.com/ để lấy plugin về. Để tải plugin LightGallery các bạn tải tại đây

Hướng dẫn cài đặt
<!-- Cài đặt plugin LightGallery -->
<script src="lightgallery-all.min.js" />  
<link href="lightgallery.css" />

<!-- Cài đặt plugin masonry -->
<script src="masonry.pkgd.min.js" />  
Nội dung Html. Đây chỉ là nội dung mẫu theo cách sử dụng của tôi. 
<div class="row" data-form="grid">
    <div class="col-3 mb-3">
        <img class="rounded" src="anh-1.jpg" title="Áo dài 1" />
    </div>
    <div class="col-3 mb-3">
        <img class="rounded" src="anh-2.jpg" title="Áo dài 2" />
    </div>
    <div class="col-3 mb-3">
        <img class="rounded" src="anh-3.jpg" title="Áo dài 3" />
    </div>
    <div class="col-3 mb-3">
        <img class="rounded" src="anh-4.jpg" title="Áo dài 4" />
    </div>
    <div class="col-3 mb-3">
        <img class="rounded" src="anh-5.jpg" title="Áo dài 5" />
    </div>
    <div class="col-3 mb-3">
        <img class="rounded" src="anh-6.jpg" title="Áo dài 6" />
    </div>
    <div class="col-3 mb-3">
        <img class="rounded" src="anh-7.jpg" title="Áo dài 7" />
    </div>
    <div class="col-3 mb-3">
        <img class="rounded" src="anh-8.jpg" title="Áo dài 8" />
    </div>
    <div class="col-3 mb-3">
        <img class="rounded" src="anh-9.jpg" title="Áo dài 9" />
    </div>
</div>
Sau khi đã cài đặt và có nội dung Html thì chúng ta gọi plugin như sau
Bước 1: Gọi plugin masonry để sắp xếp các ảnh theo lưới
var article = $("article");
var areaGrid = article.find("[data-form=grid]");
areaGrid.masonry({ itemSelector: ".col-3" });
Bước 2. Gọi plugin LightGallery để khởi tạo Gallery slide ảnh
article.find(".col-3 img").each(function ()
{
    var img = $(this);
    var div = img.parent();
    img.css("cursor", "pointer")
    div.attr("data-src", img.attr("src"));
    div.attr("data-sub-html", img.attr("title"));
});

areaGrid.lightGallery({ selector: ".col-3" });

Điều chú ý ở đây là thuộc tính itemSelector của Masonry, selector của LightGallery chỉ đến các item trong lưới ảnh và cũng là item element trong slide của gallery. Với điều kiện các element này phải là con trực tiếp của element chúng ta gọi plugin. Cụ thể ở đây là các thẻ div.col-3 là nằm trong div[data-form=grid]

Cuối cùng chúng ta cùng xem kết quả sau khi kết hợp 2 plugin. Click vào ảnh để Slide được thực hiện.

Tôi chưa ứng dụng dùng plugin Masonry, tuy nhiên plugin LightGallery thì tôi đã sử dụng ở blog này trong tất cả các bài viết. Ví dụ như bài Bạn tôi - Lập trình viên mang tâm hồn nghệ sĩ, cũng sẽ làm cho bài viết trở nên sinh động hơn và có tương tác với người xem nhiều hơn.

Chúc các bạn sử dụng plugin trên hiệu quả.

Sơn 20