Isotop translate3d Werte sind erhöht

Question

Bitte ich brauche Hilfe ich verwendete Isotop, um meine Projekte zu filtern, aber Projekte sind nicht gut organisiert, da Inline-Stil translate3d Werte erhöht werden .. zum Beispiel sollte das erste Projekt mit Werten 0px, 0px, 0px aber beginnen mein Fall beginnt es bei 40px, 0px, 0px

Ohne Javascript-Code einschließlich i siehe 4 Projekte gut wie diese

organisiert Aber wenn ich JS umfasse Code i 3 Projekte in einer Reihe und nicht organisiert, wie es sollte be

Bitte besuchen my website das Problem der Projekte Block positioniert am unteren Rand der Seite oberhalb der Fußzeile

Javascript

jQuery('document').ready(function() { 
    var portfolio = jQuery('#portfolio'); 
    var items  = jQuery('.items', portfolio); 
    var filters  = jQuery('.filters li a', portfolio); 

    items.imagesLoaded(function() { 
     items.isotope({ 
      itemSelector  : '.item', 
      layoutMode   : 'fitRows', 
      transitionDuration : '0.7s' 
     }); 
    }); 
}); 

CSS

.isotope-item { 
    z-index: 2; 
} 

.isotope-hidden.isotope-item { 
    pointer-events: none; 
    z-index: 1; 
} 
.isotope-item { 
    /*I removed "transform 0.5s" and "!important"*/ 
    transition: opacity 0.5s, background-color 0.25s linear, border-color 0.25s linear; 
} 
.isotope, 
.isotope .isotope-item { 
    /* change duration value to whatever you like */ 
    -webkit-transition-duration: 0.7s; 
    -moz-transition-duration: 0.7s; 
     -ms-transition-duration: 0.7s; 
     -o-transition-duration: 0.7s; 
      transition-duration: 0.7s; 
} 

.isotope { 
    -webkit-transition-property: height, width; 
    -moz-transition-property: height, width; 
     -ms-transition-property: height, width; 
     -o-transition-property: height, width; 
      transition-property: height, width; 
} 

.isotope .isotope-item { 
    -webkit-transition-property: -webkit-transform, opacity; 
    -moz-transition-property: -moz-transform, opacity; 
     -ms-transition-property:  -ms-transform, opacity; 
     -o-transition-property:  -o-transform, opacity; 
      transition-property:   transform, opacity; 
} 

/**** disabling Isotope CSS3 transitions ****/ 

.isotope.no-transition, 
.isotope.no-transition .isotope-item, 
.isotope .isotope-item.no-transition { 
    -webkit-transition-duration: 0s; 
    -moz-transition-duration: 0s; 
     -ms-transition-duration: 0s; 
     -o-transition-duration: 0s; 
      transition-duration: 0s; 
} 

Answer 1

Wie Fenici sagte zu verstehen sein Kommentar, die Lösung dafür ist, die interne Polsterung auf Ihrem <ul> wie folgt zu löschen:

ul.items { 
    padding: 0; 
} 

Derzeit gibt es eine padding-right:40px; auf die itemSelector ‚Mutter, die aufgrund der Verwendung nicht anders Boxmodell in JavaScript bei der Berechnung des Isotops Elemente Positionierung verwendet (und anschließend Isotop).

Answer 2

Sie verwenden eine sehr alte Version des Isotops v1.5.25 (ab 2013), die aber mit js-Code aus der aktuellen Version gestartet wird (transitionDuration: ist nicht Teil der alten Version). Die aktuellste Version ist v3.0.4, die nicht die .isotope CSS verwendet. Aktualisieren Sie isotope.js auf die aktuelle Version und entfernen Sie das obige CSS.