Xây dựng bố cục lưới có thể sắp xếp đáp ứng với tập lệnh này

Lưới tùy chỉnh là một số tính năng khó nhất để tạo từ đầu. Bạn có thể tìm thấy rất nhiều plugin lưới nề nhưng chúng mỗi người có những hạn chế và yêu cầu riêng.

Các Kịch bản Muuri là một sự thay thế mạnh mẽ cho bất cứ ai cần các yếu tố lưới có thể phân loại và đáp ứng với sự hỗ trợ cảm ứng.

Nó được xây dựng trên Velocity.js cho hình ảnh động, cùng với Thư viện Hammer.js để xử lý cảm ứng di động. Muuri không làm yêu cầu jQuery, vì vậy, đây là một trong số ít các plugin JavaScript vanilla cho giao diện lưới.

Trên trang dự án chính, bạn sẽ tìm thấy một bản demo lưới đẹp với tất cả các tính năng. Hiệu ứng hoạt hình, hỗ trợ kéo và thả và các thành phần lưới khác nhau có kích thước khác nhau. Bản demo này cho thấy bạn có bao nhiêu quyền kiểm soát với lưới Muuri.

Bạn có thể chọn Những yếu tố để hiển thị, dựa trên các lớp (tức là lọc), cùng với bạn muốn điền vào chỗ trống như thế nào.

Lưới Masonry thường để lại những chỗ trống vì các phần tử lưới không luôn khớp với nhau một cách hoàn hảo. Điều này là khá điển hình cho các trang web lớn hơn như Pinterest. Mặc dù, bạn có thể thêm các mục lưới có thể kéo đến hầu hết mọi giao diện do người dùng kiểm soát.

Nghĩ về hồ sơ xã hội với bố trí widget và làm thế nào họ sẽ làm việc. Hoặc, nghĩ về danh sách việc cần làm tùy chỉnh chạy dưới dạng ứng dụng web lũy tiến trên JavaScript. Thực sự có một bản demo tuyệt vời này trên trang Muuri hiển thị danh sách việc cần làm mẫu và cách nó có thể hoạt động như một PWA trên thiết bị di động.

Để bắt đầu, bạn chỉ cần bao gồm tất cả các phụ thuộc JavaScript, cùng với các tập lệnh Muuri. Bạn có thể kéo chúng xuống qua npm hoặc lấy một bản sao từ repo GitHub.

Sau đó, bạn tạo một phần tử lưới container và nhắm mục tiêu với một phiên bản mới của Muuri () phương pháp. Tất cả đều khá đơn giản và đặc biệt dễ sử dụng bằng cách sao chép đoạn mã từ repo GitHub.

Với hỗ trợ đầy đủ cho tất cả các trình duyệt hiện đại (IE9 +) và giao diện hỗ trợ cảm ứng, plugin này là một trong những tính năng tốt nhất cho tính năng kéo và thả lưới.

Tìm hiểu thêm bằng cách đọc qua trang chủ Muuri và mày mò với các bản demo trực tiếp. Đây là một hệ thống tuyệt vời cho lưới năng động và nó vẫn đang phát triển, vì vậy bạn có thể tin tưởng rằng plugin này sẽ xuất hiện trong một thời gian dài.