Share
Xem chủ đề cũ hơnGo downXem chủ đề mới hơn
avatar
Sáng lập viên
Sáng lập viên
Posts : 16
Points : 2147483647
Thanked : 36
Xem lý lịch thành viên

[Đóng góp] Masonry – Tự động sắp xếp phần tử lại gần nhau

on Thu Jun 16, 2016 8:43 am
Message reputation : 50% (2 votes)
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 đó.


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ẻ

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
Xem chủ đề cũ hơnVề Đầu TrangXem chủ đề mới hơn
Permissions in this forum:
Bạn không có quyền trả lời bài viết