Trang Chính
Latest images
Tìm kiếm
Đăng ký
Đăng Nhập
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:
Cách dùng:
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>
Sử dụng bằng cách tạo js mới với nội dung:
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'
});
});
Nguồn: NCat
