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

Thảo luận trong 'Rao Vặt Miền Bắc' bắt đầu bởi springriver, 13/2/15.

  1. springriver

    springriver Thành Viên Mới

    Tham gia ngày:
    6/1/15
    Bài viết:
    64
    Đã được thích:
    0
    Điểm thành tích:
    6
    Đị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

    [​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!
     
    Cảm ơn đã xem bài:

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

    Đang tải...


Like và Share ủng hộ ITSEOVN