jQuery Izotop - Centered i płyn/Responsive

Question

Zadaję pytanie o Isotope

Jest to świetny plugin do jQuery.

Grałem z tym od jakiegoś czasu, ale nie wiem wystarczająco dużo o javascript, aby połączyć dwie techniki izotopowe: responsive Isotope i centered Isotope.

Z powodzeniem użyłem mody responsywnej i zadziałało całkiem dobrze, z wyjątkiem tego, że teraz muszę wyśrodkować całość w obrębie elementu div. Tryb wyśrodkowanego układu nie jest udokumentowany, podobnie jak tryb responsywny, więc mam problem z uruchomieniem go. Zasadniczo niedostosowania trybu wyśrodkowanego są następujące:

Aby użyć tego modu, skopiuj poprawione metody znajdujące się w źródle strony pokazowej.

Niestety, w źródle widoku występują różne rodzaje skryptów javascript, a ja nie mam wystarczającego doświadczenia z javascriptem, aby je wybrać, a także połączyć je ze skryptem responsywnym, który już działa.

Każda pomoc zostanie bardzo doceniona.

A site with a working example of what I need.

My site that I am experimenting with.

działa lepiej w Firefoksie myślę.

Answer 1

Oto przykład dostarczone przez samego Davida DeSandro:

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

Answer 2

spróbować użyć przejścia na pliku CSS dla każdej z klas na zawartość dziecięcej. powinny być pomocne i może być bardziej 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; 

nadzieja to działa

Answer 3

Ten jsfiddle będzie prawdopodobnie rozwiązać swój problem: http://jsfiddle.net/schmidjon/6Z3sn/. To proste rozszerzenie izotop z pułapki:

(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)); 

Źródło: Using jQuery Isotope for masonry in fluid layouts