Share Xây dựng bố cục lưới cho website với thư viện Muuri

[filiallion]

Language

Tiếng Việt

Hiện nay có rất nhiều thư viện CSS và JavaScript có hỗ trợ các thành phần dùng để tạo các bố cục dạng lưới, một trong số đó phải kể đến như Bootstrap, UIkit, ... Bài viết này tôi giới thiệu với các bạn một thư viện chỉ chuyên dùng để tạo các bố cục lưới là Muuri. Tuy nhiên, thư viện Muuri không hoàn toàn giống như các thư viện tạo bố cục khác mà nó có nhiều điểm rất khác biệt.

Thư viện Muuri được tạo ra với mục đích tạo các bố cục dạng lưới, có thể tương thích với nhiều kích thước màn hình (Khả năng responsive), có thể kéo thả để sắp xếp lại bố cục cũng như được tích hợp nhiều hiệu ứng hoạt hình đẹp mắt. Chính vì những tính năng này mà thư viện Muuri trở nên khác biệt so với các thư viện tạo bố cục khác.

Thư viện Muuri cung cấp nhiều tuỳ chọn để các bạn có thể dễ dàng tuỳ chỉnh theo ý muốn. Để sử dụng thư viện Muuri, các bạn có thể truy cập địa chỉ https://github.com/haltu/muuri để tải về và tích hợp vào website với dòng mã lệnh như sau:

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

Bây giờ các bạn có thể tạo bố cục lưới như sau:

<div class="grid">
    <div class="item">
        <div class="item-content">Content 1</div>
    </div>
    <div class="item">
        <div class="item-content">
            <div class="my-custom-content">Content 2</div>
        </div>
    </div>
</div>

Tuỳ chỉnh giao diện lưới với nội dung mã lệnh CSS như sau:

.grid {
    position: relative;
}

.item {
    display: block;
    width: 100px;
    height: 100px;
    margin: 5px;
    position: absolute;
    z-index: 1;
    color: #fff;
    background: #000;
}

.item.muuri-item-dragging {
    z-index: 3;
}

.item.muuri-item-releasing {
    z-index: 2;
}

.item.muuri-item-hidden {
    z-index: 0;
}

.item-content {
    width: 100%;
    height: 100%;
    position: relative;
}

Và cuối cùng là cài đặt JavaScript với dòng mã lệnh như sau:

var grid = new Muuri('.grid');

Các bạn có thể xem thêm một số ví dụ khác tại địa chỉ https://codepen.io/collection/AWopag cũng như tìm hiểu thêm về thư viện Muuri tại địa chỉ https://github.com/haltu/muuri.