Hình ảnh chồng chéo đồng vị?

Question

Có vẻ như nó chỉ xảy ra trong Chrome và Safari .. chứ không phải Firefox. Tôi đang sử dụng nó với khung nền tảng đáp ứng nên tôi không chắc chắn phải làm gì về việc thiết lập chiều cao. Dường như không có đủ khoảng trống giữa các hình ảnh trong Chrome/Safari ..

Làm cách nào để khắc phục sự cố này?

Edit: Đây là một fiddle http://jsfiddle.net/TLjay/

Vấn đề với nó là nó dường như không được hiển thị vấn đề tôi đang gặp .. vì vậy tôi không biết phải làm gì về điều đó .. Tôi đã thử vô hiệu hóa tất cả mọi thứ nhưng đồng vị .. tất cả jquery/css và Nó vẫn co lại các hình ảnh trong Chrome/Safari nhưng nó tốt trong firefox.

Ngoài ra, Nếu tôi nhấn phím "Tất cả" dưới lọc nó trải dài trang với cách giả sử nó nhìn để có thể hữu ích trong việc tìm này ra

tôi đã nhận nó để làm việc với imagesLoaded, vì vậy cho đủ của nó không gian nhưng không gian ở bên trái và bên phải của hình ảnh vẫn là không phải là nơi cho rằng nó sẽ được .. kịch bản của tôi là dưới

<script type="text/javascript"> 
    var $container = $('.isosort') 
    // initialize Isotope 
     $container.isotope({ 
      // options... 
      resizable: false, // disable normal resizing 
      layoutMode : 'fitRows', 
      animationEngine : 'best-available', 

      // set columnWidth to a percentage of container width 
      masonry: { columnWidth: $container.width()/5 } 
     }); 

     // update columnWidth on window resize 
     $(window).smartresize(function(){ 
      $container.isotope({ 
      // update columnWidth to a percentage of container width 
      masonry: { columnWidth: $container.width()/5 } 
      }); 
     }); 
     $container.imagesLoaded(function(){ 

       $container.isotope({ 
      // options... 
       }); 
     }); 

     $('#filters a').click(function(){ 
      var selector = $(this).attr('data-filter'); 
      $container.isotope({ filter: selector }); 
      return false; 
     }); 
    </script> 

Answer 1

cập nhật (câu trả lời ban đầu là sai vì trình duyệt sử dụng hình ảnh được lưu trữ ..)

Vấn đề có vẻ là các hình ảnh không được tải và các tính toán không thành công.

Nếu bạn quấn mã isotop trong $(window).load(function(){ ..... }); nó dường như làm việc như mong đợi ..

Xem http://jsfiddle.net/TLjay/2/

---

Không chắc lý do tại sao nó xảy ra, nhưng một workaround đơn giản là ( kể từ khi nó được cố định khi bạn đổi kích thước cửa sổ) để gọi theo cách thủ công resize.

vì vậy chỉ cần thêm $(window).resize(); ở phần cuối của mã của bạn sửa chữa nó ..

Demo tại http://jsfiddle.net/TLjay/1/

Answer 2

Bạn nên chắc chắn rằng bạn tải trước tất cả imagess trước khi bạn gọi phương thức đồng vị, đây là bản demo giới thực cho điều này: http://gbin1.com/gb/demoviewer/360/06242ba0-40a1-45fd-946f-cc89e0df64c9/index.html.htm, bạn tải trước hình ảnh với plugin jquery.imagesloaded.min.js, sau đó gọi đồng vị, nội dung sẽ không bị chồng chéo.

Answer 3

hình ảnhĐược tải bằng cách kiểm tra hình ảnh hiện có trong phần tử chứa. Vì vậy, trong trường hợp của bạn, nó không thực sự làm bất cứ điều gì trong $ (window) .load() vì không có mục nào trong phần tử đó. Thay vào đó, tôi khuyên bạn nên kích hoạt lại imagesLoaded, sau khi các mục đã được chèn vào với $ .ajax.success

success: function(data){ 
    // Update isotope container with new data. 
    $container.isotope('remove', $container.data('isotope').$allAtoms) 
    $container.isotope('insert', $(data)) 
     // trigger isotope again after images have been loaded 
     .imagesLoaded(function() { 
     $container.isotope('reLayout'); 
     }); 
    } 
});