Isotopo immagini sovrapposte?

Question

Sembra che accada solo in Chrome e Safari .. non in Firefox. Lo sto usando con il framework responsive di base quindi non sono sicuro di cosa fare per impostare l'altezza. Sembra anche che non ci sia abbastanza spazio tra le immagini in Chrome/Safari ..

Come posso risolvere questo problema?

Edit: Ecco un violino http://jsfiddle.net/TLjay/

Il problema è che non sembra essere la visualizzazione del problema che sto avendo .. quindi non sono sicuro di cosa fare al riguardo .. Ho provato a disabilitare tutto tranne isotopo .. tutto jquery/css e riduce ancora le immagini in Chrome/Safari ma va bene in Firefox.

Inoltre, se ho colpito il "Tutto" sotto il filtro si estende la pagina per come la sua supponiamo di guardare in modo che potrebbe essere utile per capire questo fuori

ho preso a lavorare con imagesLoaded, quindi la sua dando abbastanza spazio, ma lo spazio a sinistra ea destra delle immagini non è ancora dove la sua supponiamo di essere .. il mio script è inferiore

<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

Aggiornamento (risposta originale era sbagliata, perché il browser utilizzato le immagini memorizzate nella cache ..)

Il problema sembra essere che le immagini non vengono caricate e i calcoli falliscono.

Se si avvolge il codice di ISOTOP in $(window).load(function(){ ..... }); sembra funzionare come previsto ..

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

---

Non so perché succede, ma una soluzione semplice è ( perché diventa corretto una volta ridimensionata la finestra) per chiamare manualmente un resize.

quindi basta aggiungere $(window).resize(); alla fine del codice ripara ..

Demo a http://jsfiddle.net/TLjay/1/

Answer 2

È necessario assicurarsi di precaricare tutta imagess prima di chiamare il metodo degli isotopi, ecco mondo reale demo per questo: http://gbin1.com/gb/demoviewer/360/06242ba0-40a1-45fd-946f-cc89e0df64c9/index.html.htm, si precaricano le immagini con il plugin jquery.imagesloaded.min.js, quindi si chiama isotopo, il contenuto non viene sovrapposto.

Answer 3

imagesLavori funziona controllando le immagini attualmente nell'elemento contenitore. Quindi nel tuo caso, in realtà non fa nulla in $ (window) .load() poiché non ci sono elementi in quell'elemento. Invece, consiglierei di attivare nuovamente le immagini caricate di nuovo, dopo che gli articoli sono stati inseriti 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'); 
     }); 
    } 
});