Tạo bố cục lưới Masonry nhanh với Bricks.js

Nó luôn luôn đơn giản để tạo lưới với jQuery, sử dụng plugin và hướng dẫn miễn phí từ nhà phát triển.

Tuy nhiên, lưới xây dựng khó khăn hơn để xây dựng, vì chúng không vừa đều trên trang. Bạn sẽ có chiều rộng kích thước cố định cho các cột nhưng chiều cao mục có thể thay đổi dữ dội.

Để làm một lưới nề hoàn hảo pixel bạn cần một plugin như Bricks.js.

Plugin này hoàn toàn là nguồn mở và nhanh đến mức nực cười. Nó sẽ kết xuất lưới trong chưa đầy nửa giây, thậm chí với hàng tá mục trên trang.

Hầu hết mọi người nhận ra lưới nề từ Pinterest kể từ khi họ phổ biến bố cục. Nhưng, nó đã phát triển thành được sử dụng trong nhiều trang web khác, quá.

Để bắt đầu với Bricks.js, bạn sẽ cần một số nội dung và một bố cục trang mặc định. Bạn cài đặt plugin ngay từ npm hoặc thông qua GitHub nếu việc đó dễ dàng hơn.

Với thiết lập ban đầu, bạn vượt qua ba thông số cụ thể:

1. Thùng đựng hàng - một Phần tử container DOM cho lưới điện
2. Đóng gói - một thuộc tính xác định cách các mục chảy trong lưới
3. Kích cỡ - một mảng chiều rộng và máng xối, được xác định bằng pixel

Plugin sử dụng tất cả các giá trị này để tự động hóa lưới nề từ đầu.

Và, bạn thậm chí có thể sử dụng nó để tải vô hạn nếu bạn muốn lưới nề hoạt động giống như Pinterest.

Kiểm tra trang demo cho một lưới tương tác mà bạn có thể thay đổi để thử nghiệm. Bạn xác định tổng số phần tử và nó sẽ tự động hóa quá trình trong khi hiển thị tổng thời gian kết xuất.

Ví dụ, tôi đã thử nghiệm một lưới với 500 yếu tố và nó chỉ mất 13 mili giây hoàn thành. Đây không phải là yếu tố thời gian để tải tất cả 500 hình ảnh, nhưng 13 ms cho lưới được tạo tự động rất ấn tượng.

Tự bắt đầu bằng cách tải xuống các tệp từ GitHub và làm theo hướng dẫn cài đặt. Điều này có thể cảm thấy khó hiểu lúc đầu nhưng bạn càng chơi với nó thì càng dễ thiết lập.