Đệm Bông Ép

Kết quả 1 đến 2 của 2

Chủ đề: Cách sử dụng thư viên masonry của Javascript

  1. #1
    Thành Viên Mới
    Ngày tham gia
    Jan 2015
    Bài viết
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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 joomla k2 masonry


    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
    Mã nguồn HTML:
    <script src="/path/to/masonry.pkgd.min.js"></script>[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]

    Ta có đoạn HTML như sau:
    Mã nguồn HTML:
    <div id="container">    <div class="item">       <img src="1.png"/>    </div>     ................    <div class="item">      <img src="5.png"/>    </div>  </div>[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]

    Trang điểm cho nó ít CSS
    Mã nguồn HTML:
     .item{   width: 50%; } .item img{   width: 100%; }[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]

    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 :
    Mã nguồn HTML:
    <script type="text/javascript">  $(document).ready(function(){     var $container=$('#container');     $container.imagesLoaded( function() {          $('#container').masonry();     });   }); </script>[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]

    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!

  2. #2
    Thành Viên Mới
    Ngày tham gia
    Dec 2014
    Bài viết
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thư viện này của Javascript quá hay luôn. Các thành phần bố trí hợp lý, không để 1 khoảng trống to đùng như trước, mà lại tự động responsive, các bạn phát triển web nên tận dụng tối đa công nghệ này

Các Chủ đề tương tự

  1. TQ Microsoft tiếp tục công bố mã nguồn mở JavaScript
    Bởi longtrinhtnm trong diễn đàn Kho Điện Thoại
    Trả lời: 0
    Tin đăng cuối: 04-12-2014, 02:33 PM

Quyền viết bài

  • Bạn Không thể gửi Chủ đề mới
  • Bạn Không thể Gửi trả lời
  • Bạn Không thể Gửi file đính kèm
  • Bạn Không thể Sửa bài viết của mình
  •