Share Tạo bố cục lưới giao diện với thư viện Masonry

filiallion · 07/04/2018

Hiện tại có rất nhiều thư viện CSS giúp các bạn tạo bố cục lưới giao diện như Bootstrap, UIkit,... nhưng các thư viện này bao gồm rất nhiều thành phần chứ không chỉ gói gọn với thành phần lưới. Trong một số trường hợp các bạn chỉ muốn sử dụng lưới để trình bày bố cục giao diện thì Masonry là thư viện phù hợp nhất hỗ trợ việc này.

Để sử dụng thư viện Masonry các bạn phải tích hợp thư viện jQuery vào website. Các bạn có thể tải thư viện jQuery tại địa chỉ https://jquery.com/download.

Các bạn tải thư viện Masonry tại địa chỉ https://masonry.desandro.com/#download.

Các bạn tích hợp thư viện Masonry vào website với dòng lệnh như sau:

HTML:

<script src="path/to/masonry.pkgd.min.js"></script>

Và khai báo cài đặt thư viện Masonry như sau:

JavaScript:

$(function() {
    $('.masonry-grid').masonry({
        itemSelector: '.grid-item'
    });
});

Tạo lưới bố cục như mẫu sau:

HTML:

<div class="masonry-grid">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
</div>

Các bạn có thể tham khảo chi tiết thư viện Masonry tại địa chỉ https://masonry.desandro.com.

Share Tạo bố cục lưới giao diện với thư viện Masonry

filiallion

Administrator