Init HTML

Tại bài viết trước mình có giới thiệu cách dùng CSS để chia lưới hiển thị.

• Chia lưới hiển thị hình ảnh dễ dàng với CSS Grid Layout

Hôm nay, mình sẽ giới thiệu một thư viện JavaScript để làm việc này dễ dàng hơn.

HTML

HTML đơn giản như sau.

<div class="grid">
    <div class="grid-item">...</div>
    <div class="grid-item grid-item--width2">...</div>
    <div class="grid-item">...</div>
    ...
</div>

CSS

Kích thước của các phần tử.

.grid-item { width: 25%; }
.grid-item--width2 { width: 50%; }

jQuery

Đầu tiên bạn cần nhúng thư viện jQuery và Packery vào trang web của bạn.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>

Sau đó, sử dụng như sau.

jQuery(document).ready(function($) {
    var $grid = $('.grid').packery({
        itemSelector: '.grid-item',
        gutter: 10 // khoảng cách giữa các phần tử
    });
});

Kéo thả sắp xếp thứ tự

Để có thể kéo thả sắp xếp các phần tử, bạn cần thêm thư viện Draggabilly.

<script src="https://unpkg.com/draggabilly@3/dist/draggabilly.pkgd.min.js"></script>

Sau đó tùy chỉnh thêm đoạn mã trên.

jQuery(document).ready(function($) {
    var $grid = $('.grid').packery({
        itemSelector: '.grid-item',
        gutter: 10
    });

    $grid.find('.grid-item').each(function(i, gridItem) {
        var draggie = new Draggabilly(gridItem);
        $grid.packery('bindDraggabillyEvents', draggie);
    });
});

Ví dụ bạn thử kéo thả để sắp xếp các hình ảnh bên dưới.

Chúc các bạn thành công!