Diễn đàn tổng hợp về Forumotion

DÀNH CHO KHÁCH
Vui lòng đăng nhập hoặc đăng kí để tham gia diễn đàn

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

Share
  • Gửi bài mới
  • Trả lời chủ đề này
Dang123
avatar
Posts : 16
Points : 2147483647
Thanked : 36

 on Thu Jun 16, 2016 8:43 am

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ẻ

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

Đăng kí hoặc đăng nhập để gửi trả lời

Bạn phải là thành viên của diễn đàn thì mới gửi được câu trả lời

Tạo một tài khoản

Bạn muốn tham gia diễn đàn của chúng tôi ? Hãy tạo một tài khoản nào !


Đăng kí

Đăng nhập vào diễn đàn

Bạn đã có tài khoản ? Còn chờ gì nữa mà không đăng nhập vào diễn đàn !


Đăng nhập

  • Bình luận Facebook
  • Bình luận Google