Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Cách sử dụng thư viện masonry của Javascript

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi springriver, 11/2/15.

Lượt xem: 2,881

  1. springriver Thành viên cấp 1

    Đị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 beautiful-templates.com/evo/st-content-showcase-joomla-content-joomla-gallery-joomla-slider/

    [​IMG]

    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

    HTML:
    
    <script src="/path/to/masonry.pkgd.min.js"></script>
    
    
    Ta có đoạn HTML như sau:

    HTML:
    
    <div id="container">
    <div class="item">
    <img src="1.png"/>
    </div>
    ................
    <div class="item">
    <img src="5.png"/>
    </div>
    </div>
    
    Trang điểm cho nó ít CSS

    HTML:
    
     .item{
    width: 50%;
    }
    .item img{
    width: 100%;
    }
    
    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 :

    HTML:
    
    <script type="text/javascript">
    $(document).ready(function(){
    var $container=$('#container');
    $container.imagesLoaded( function() {
    $('#container').masonry();
    });
    });
    </script>
    
    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!

    ...
    Phạm Hữu Dư thích bài viết này

Ủng hộ diễn đàn