Imágenes superpuestas de isótopos?

Question

Parece que solo ocurre en Chrome y Safari ... no en Firefox. Lo estoy usando con el marco sensible de la base, así que no estoy seguro de qué hacer para establecer la altura. También parece que no hay suficiente espacio entre las imágenes en Chrome/Safari ...

¿Cómo puedo solucionar esto?

Editar: Aquí es un violín http://jsfiddle.net/TLjay/

El problema con esto es que no parece estar mostrando el problema que estoy teniendo .. así que no estoy seguro de qué hacer al respecto .. Intenté desactivar todo pero isotopo ... todo jquery/css y aún reduce las imágenes en Chrome/Safari, pero está bien en Firefox.

Además, si me golpeó el "Todo" debajo del filtro se extiende la página a la manera en que su supone que debe mirar por lo que podría ser útil en calcular esto

lo tengo para trabajar con imagesLoaded, por lo que su dándole bastante espacio, pero el espacio de la izquierda y derecha de las imágenes todavía no es donde su supone que debe ser .. mi guión está por debajo

<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

actualización (respuesta original estaba mal ya que el navegador utiliza imágenes en caché ..)

El problema parece ser que las imágenes no se cargan y los cálculos fallan.

Si envuelve el código isótopo en $(window).load(function(){ ..... }); parece que funciona como se esperaba ..

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

---

No estoy seguro de por qué sucede, pero una solución sencilla consiste en ( ya que se pone solucionado una vez que cambie el tamaño de la ventana) para llamar manualmente a resize.

tan sólo añadir $(window).resize(); al final de su código arregla ..

demo en http://jsfiddle.net/TLjay/1/

Answer 2

Debe asegurarse de carga previamente toda imagess antes de llamar método de isótopos, aquí es de demostración del mundo real para esto: http://gbin1.com/gb/demoviewer/360/06242ba0-40a1-45fd-946f-cc89e0df64c9/index.html.htm, precarga imágenes con el plugin jquery.imagesloaded.min.js, luego llama al isótopo, el contenido no se solapará.

Answer 3

imagesLoaded funciona al verificar las imágenes que se encuentran actualmente en el elemento contenedor. Entonces, en su caso, en realidad no se hace nada en $ (ventana) .load() ya que no hay elementos en ese elemento. En cambio, recomendaría disparar imagesLoaded nuevamente, después de que los artículos se hayan insertado con $ .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'); 
     }); 
    } 
});