Hướng dẫn sử dụng thư viện Masonry của Javascript

Masonry là gì?

Masonry là một bộ thư viện bố trí bố cục giao diện web dạng lưới bằng javascript. Thư viện Masonry đặt các thành phần ở vị trí tùy chỉnh dựa vào không gian theo chiều dọc, giống như thợ xây sắp xếp các viên gạch trên bức tường vậy. Dưới đây là một vài ví dụ sử dụng thư viện Masonry:

Cách sử dụng

Bạn có thể vào trang chủ để tải thư viện Masonry về. Sau đó tích hợp vào trang của bạn:

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

Hoặc bạn có thể dẫn link trực tiếp tới

<script src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.min.js"></script>

Thư viện Masonry làm việc trên thành phần với các thành phần con được chứa bên trong.

<div id="container">

<div class="item"></div>


<div class="item w2"></div>


<div class="item"></div>


<div class="item w2"></div>


<div class="item h2"></div>


<div class="item"></div>


<div class="item h2"></div>


<div class="item w2 h2"></div>


<div class="item"></div>


<div class="item"></div>


<div class="item h2"></div>


<div class="item"></div>


<div class="item"></div>


<div class="item w2"></div>


<div class="item h2"></div>


<div class="item"></div>


<div class="item h2"></div>

</div>

Thêm một chút CSS.

body {
 font-family: sans-serif;
}

#container {
 border: 1px solid;
 padding: 5px;
 max-width: 630px; 
}

.item {
 width: 60px;
 height: 60px;
 float: left;
 margin: 5px;
 background: #CCC;
}

.item.w2 {
 width: 130px;
}

.item.h2 {
 height: 130px;
}

Phần Javascript

$( function() {

  $('#container').masonry({

    itemSelector: '.item',

    columnWidth: 70

  });

});

Kết luận:

Thư viện Masonry giúp chúng ta tạo ra giao diện web sinh động và đẹp mắt. Và bộ thư viện này rất dễ sử dụng. Các bạn có thể sử dụng trong các dự án cần giao diện bắt mắt và đem tới cái nhìn mới mẻ cho website. Cảm ơn các bạn đã theo dõi.