Cách sử dụng thư viện masonry của Javascript

Định nghĩa

Masonry là một thư viện lưới của Javascript. Nó hoạt động bằng cách đặt các thành phần ở vị trí tối ưu dựa trên khoảng trắng ở chiều dọc. Các bạn có thể tưởng tượng như trò chơi xếp hình .

Bạn có thể xem demo tại beautiful-templates.com/evo/st-content-showcase-joomla-content-joomla-gallery-joomla-slider/



Như các bạn thấy trên hình, các thành phần không có chiều cao giống nhau, nhưng chúng tự động được xếp kín lên nhau, không tạo lên khoảng trống và xếp bằng chiều ngang như định dạng bình thường.

Cài đặt:

Dowload thư viện masonry tại: cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.min.js

Tích hợp Masonry vào trang của bạn

HTML:

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

Ta có đoạn HTML như sau:

HTML:

<div id="container">
<div class="item">
<img src="1.png"/>
</div>
................
<div class="item">
<img src="5.png"/>
</div>
</div>

Trang điểm cho nó ít CSS

HTML:

 .item{
width: 50%;
}
.item img{
width: 100%;
}

Về phần nguyên liệu đã xong, bây giờ ta chỉ cần viết 1 chút lệnh javascript nữa :

HTML:

<script type="text/javascript">
$(document).ready(function(){
var $container=$('#container');
$container.imagesLoaded( function() {
$('#container').masonry();
});
});
</script>

Thế là trang web của bạn đã là masonry, các thành phần được bố trí liền nhau rất đẹp.

Nhưng khoan, có khi nào bạn check mà vẫn thấy thành phần sắp xếp lộn xộn, không đẹp được như demo không? khi refresh lại thì mọi thứ lại gọn gàng, chẳng lẽ bạn làm sai cái gì đó? Bạn đã làm đúng rồi, các thành phần trong lần đầu tiên mở web nó lộn xộn bởi vì có thể ảnh của bạn chưa được load lên, Javascript nó chưa lấy được thông tin về ảnh( width, height) nên nó không bố trí 1 cách hoàn hảo được, như bạn để ý 1 chút, trên doạn code JS trên tôi có dùng 1 hàm: imagesLoaded, hàm này cũng là 1 thư viện của jQuery, nó có tác dụng: thông báo khi ảnh đã load được hết lên. Sử dụng nó cũng rất đơn giản, bạn vào trang github.com/desandro/imagesloaded download cái imagesloaded.pkgd.min.js về rồi insert nó và trang web, và gọi hàm như đoạn JS trên tôi gọi là xong.

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