Isotopo piegato (elementi sovrapposti)

Question

Ho letto l'overflow dello stack per una soluzione ma non riesco a trovarlo.

(immagine full size al http://i.imgur.com/hrcDg.png)

Quando carico della pagina sembra che

Ecco il sito (beta)

http://e-gimnazija.hostoi.com/test/site/index.html

Se premere all si svolge, forse posso risolverlo se si auto si svolge all'inizio

Answer 1

Il problema è che quando si esegue .isotope le immagini non sono ancora caricati, in modo che il plug-in non può calcolare la loro dimensione ..

Hai alcune opzioni tra cui scegliere

1. Inizio isotopo dopo che le immagini sono caricate .. $(window).load(function(){/*init plugin here*/})
2. Utilizzare il imagesLoaded plug : http://isotope.metafizzy.co/docs/help.html#imagesloaded_plugin
3. chiamata reLayout una volta che le immagini vengono caricate $(window).load(function(){$('#thumbs').isotope('reLayout');});
4. se gli elementi sono fissi li dimensioni, quindi dare loro dimensioni attraverso CSS e isotope li preleverà ..

Answer 2

ho riparato con jquery :

<script type='text/javascript' > 
    $(window).load(function() { 
     $.getScript('/js/jquery.isotope.min.js', function() { }); 
    }); 
</script> 

Attende il caricamento dell'intera pagina, quindi carica lo script dell'isotopo per ultimo. Di seguito, ho una soluzione più completa, utilizzando una notifica "funzionante" e uno spinner finché tutto non viene caricato. Il filatore è dalle icone dei font-awesome ...

<div class="container wrapper"> 
    <div class="inner_content"> 
     <div class='working' > 
      <h2>working... <i class="icon-spinner icon-spin icon-large"></i></h2> 
     </div> 
    </div> 
</div> 

<script type='text/javascript' > 
    $(window).load(function() { 
     $.getScript('/js/jquery.isotope.min.js', function() { 
      $('.working').fadeOut(); 
     }); 
    }); 
</script> 

Si può vedere il mio esempio lavorando a: http://ericavhay.com/painting/portfolio