jQuery Isotope - centrato e fluido/Responsive

Question

Chiedo una domanda su Isotope

E 'un ottimo plugin per jQuery.

Ho giocato con esso per un po 'di tempo, ma non so abbastanza di javascript per combinare due delle tecniche di Isotope, responsive Isotope e centered Isotope.

ho con successo utilizzato il mod reattivo e ha funzionato abbastanza bene, solo che adesso ho bisogno di centrare il tutto all'interno di un div. La modalità di layout centrata non è documentata così come la modalità di risposta, quindi ho qualche problema a farlo funzionare. Fondamentalmente le impostazioni per la modalità di layout centrata sono:

Per utilizzare questa mod, copiare i metodi rivisti trovati nel sorgente della pagina dei demo.

Purtroppo, ci sono tutti i tipi di Javascript cose in corso nella sorgente di vista e io non ho abbastanza esperienza con javascript per prenderlo fuori e anche combinarlo con il copione reattivo ho già lavorando.

Qualsiasi aiuto sarebbe molto apprezzato.

A site with a working example of what I need.

My site that I am experimenting with.

funziona meglio in Firefox credo.

Answer 1

Ecco un esempio fornito da David DeSandro stesso:

http://jsfiddle.net/desandro/P6JGY/6/

Answer 2

provare utilizzando la transizione sul vostro file CSS per ciascuna delle classi sul contenuto del bambino. dovrebbe essere utile e può essere più slowmo

css

-webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 

speranza questo lavoro

Answer 3

Questa jsfiddle probabilmente risolvere il problema: http://jsfiddle.net/schmidjon/6Z3sn/.

(function ($) { 
var $container = $('.example'), 
    colWidth = function() { 
     var w = $container.width(), 
      columnNum = 1, 
      columnWidth = 0; 
     if (w > 1200) { 
      columnNum = 5; 
     } else if (w > 900) { 
      columnNum = 4; 
     } else if (w > 600) { 
      columnNum = 3; 
     } else if (w > 300) { 
      columnNum = 2; 
     } 
     columnWidth = Math.floor(w/columnNum); 
     $container.find('.item').each(function() { 
      var $item = $(this), 
       multiplier_w = $item.attr('class').match(/item-w(\d)/), 
       multiplier_h = $item.attr('class').match(/item-h(\d)/), 
       width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4, 
       height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4; 
      $item.css({ 
       width: width, 
       height: height 
      }); 
     }); 
     return columnWidth; 
    }, 
    isotope = function() { 
     $container.isotope({ 
      resizable: false, 
      itemSelector: '.item', 
      masonry: { 
       columnWidth: colWidth(), 
       gutterWidth: 4 
      } 
     }); 
    }; 
    isotope(); 
    $(window).smartresize(isotope); 
}(jQuery)); 

Fonte:: Using jQuery Isotope for masonry in fluid layouts