[jQ plugin] Masonry - Tự động sắp xếp phần tử lại gần nhau

  Bài viết hay nhất1
Tình hình là có lần muốn làm cho mấy box nó khít vào nhau mà không được, nhờ anh Vống giúp thì đưa cho cái link này và thấy hay :v Hồi trước có thím nào hỏi cách làm được bác Zẻo đưa link này mà méo không tìm được topic đó.

jQ plugin: Masonry
HomePage: http://masonry.desandro.com/
Github: https://github.com/desandro/masonry

Giới thiệu: Masonry là thư viện bố cục lưới JavaScript. Nó đặt phần tử vào vị trí tối ưu dựa trên không gian thẳng đứng sẵn (giống như kiểu thợ xây gắn đá khít vào nhau trên tường ấy). Bạn chắc chắn đã nhìn thấy điều đó đang dùng trên tất cả các trang mạng.

Cài đặt:
Code:
<script src="/path/to/masonry.pkgd.min.js"></script>

Cách dùng:
Code:
var container = document.querySelector('container selector');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: 'contained selector'
});

Ví dụ có thể thấy ở Homepage, các khung với nhiều size khác nhau vẫn luôn được bố trí sát nhau
Xem thêm một số cách dùng Masonry khác tại http://masonry.desandro.com/



Ứng dụng trong forumotion
Thêm vào trong Overall_header, bên trong thẻ <head></head>
Code:
<script src="http://masonry.desandro.com/masonry.pkgd.min.js" type="text/javascript"></script>

Sử dụng bằng cách tạo js mới với nội dung:
Code:
$(document).ready(function(){
  var container = document.querySelector('container selector');
  var msnry = new Masonry( container, {
    // options
    columnWidth: 200,
    itemSelector: 'contained selector'
  });
});
Trong đó container selector là phần tử bao bên ngoài và contained selector là những phần tử muốn sắp xếp được bao bởi container selector
You cannot reply to topics in this forum