TÌm Hiểu Về Masonry Layout

Siêng Văn 24/09/2019, Cập nhật: 10 tháng trước

Contents

  • 1.Áp Dụng Vào Thực Tế
  • 2.Tạo Masonry Layout
  • 3.Lời Kết
  • 4.Bài liên quan

Dạo gần đây mình thấy nổi lên một kiểu bố cục layout cho website khá mới và cũng rất được ưa chuộng mà mọi người thường hay gọi là Masonry Layout. Tên gọi của nó bắt nguồn từ tên một plugin trong jquery đó là Masonry plugin, được phát triển bởi David DeSandro – một designer của Twitter.

pinterest

Masonry Layout dược sử dụng lần đầu tiên bởi trang chuyên chia sẻ hình ảnh project nổi tiếng là Pinterest.com nên Masonry Layout còn được biết đến với cái tên Pinterest Style Layout. Ở Việt Nam thì mình cũng thấy một trang web làm về Masonry đang rất nổi với các bạn trẻ, đó là Triết Học Đường Phố.

Mình sẽ nói sơ qua về loại layout mới mẻ này. Như chúng ta thường thấy thì các loại bố cục layout cổ điển thường sử dụng thuộc tính Float trong CSS để dàn trang, sắp xếp các element side-by-side, nghĩa là sắp thứ tự theo chiều ngang rồi đến chiều dọc, chúng bỏ qua yếu tố về kích thước của các element. Điều đó tạo ra rất nhiều khoảng trống không cần thiết trong layout.

cssfloat

Nhưng đối với Masonry Layout, các element sẽ được đưa vào các cột có chiều rộng (Width) được quy định sẵn, các element có chiều cao (Height) khác nhau nằm chung một cột sẽ được xếp vào mà không tạo ra khoảng trống do khác hàng. Các bạn cứ tưởng tượng Masonry giống như trò chơi xếp gạch – Tetris vậy

masonry

Áp Dụng Vào Thực Tế

Masonry Layout theo mình thấy thì có thể áp dụng rất tốt cho các website về trình bày thư việc ảnh (Image Gallery) hay có thể giống như Triết Học Đường Phố, áp dụng cho các bài post với nội dung trích dẫn dài ngắn khác nhau. Kiểu bố cục này thích hợp nhất  với những trang web sử dụng Infinite Scroll. Rất tuyệt phải không nào??? ^_^

Một số trang ví dụ khác như The Wall, Erik Johansson Photography.

erik

thewall

Tạo Masonry Layout

Việc tạo một trang web Masonry cũng rất đơn giản. Dĩ nhiên là chúng ta sẽ sử dụng plugin Masonry rồi.

Như các post trước của mình, chúng ta cần có một cấu trúc thư mục như sau css, js, img và index.html

ma1

Đối với file HTML chúng ta làm một bố cục đơn giản như sau

Masonry Layout ... ... ...

Bây giờ là trang trí trang web, dễ như ăn bánh

*, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a { display: block; text-decoration: none; color: #000; } ul { list-style: none; } img { display: block; max-width: 100%; /* flexible image */ outline: none; border: none; margin: 0 auto; /* canh giữa image */ } .container { max-width: 1200px; margin: 100px auto; padding: 0 auto; } .container ul .item { text-align: center; border-radius: 10px; display: block; width: 32%; /* chia layout ra làm 3 cột - mỗi cột chiếm 32% của container */ padding: 8px; margin: 7px 5px; } /* Responsive design */ @media screen and (max-width: 900px) { .container ul .item { width: 45%; } } @media screen and (max-width: 500px) { .container ul .item { width: 100%; } }

Cuối cùng là khởi tạo Masonry sử dụng jquery với script sau. Lưu ý option itemSelector phải là các element con nằm trong container.

Mọi chi tiết về Masonry các bạn có thể xem tại: http://masonry.desandro.com/

Lời Kết

Như mọi người thấy là việc tạo Masonry rất dễ thực hiện. Bên cạnh plugin Masonry chúng ta còn có thể sử dụng plugin Wookmark hay Freetile.js để làm một Masonry Layout. Bạn nào thử sử dụng rồi cho mình xin ý kiến

Mọi người có ý kiến, thắc mắc hay đề xuất gì cho bài viết thì comment dưới cho mình hay nhé

Source Code

Bài liên quan

  • Làm thế nào để xin cấp EV SSL (chứng chỉ số mở rộng) cho Doanh nghiệp?
  • Bạn có thật sự cần slider/featured content?
  • [Học CSS] Kỹ thuật tạo menu ngang cơ bản
  • [Git] Cách tạo một repository
  • Sửa lỗi liên kết bị xuống hàng ở Google Chrome phiên bản mới
  • Làm sao để kiểm tra tốc độ website chính xác?

Content retrieved from:
https://thachpham.com/web-development/tim-hieu-ve-masonry-layout.html
.

Siêng Văn 24/09/2019, Cập nhật: 10 tháng trước
Ý KIẾN THÀNH VIÊN
    Chưa có bình luận