Isotope zentriert nicht

Question

Ich verwende Ruby auf Schienen und habe einige Front-End-Probleme. Ich habe vor kurzem Form JQuery Mauerwerk zu Isotop gewechselt. In Mauerwerk wurde mein Modell (Teile genannt) korrekt zentriert und animiert. Jetzt, mit Isotop, funktionieren die Animationen, aber es geschieht alles zur Seite, nicht in der Mitte der Seite. Wie kann ich das beheben?

Update: Mauerwerk-Code

Dies ist der Code, mit dem Zentrieren arbeitet, nur Mauerwerk mit (in pieces.js). Ich lade Isotope von diesem Schienenstein: https://github.com/kristianmandrup/masonry-rails. Die Website kann unter https://www.metallicpalette.com/pieces angesehen werden.

$(function() { 
return $('#pieces').imagesLoaded(function() { 
    return $('#pieces').masonry({ 
    itemSelector: '.box', 
    isFitWidth: true 
    }); 
}); 
}); 

pieces.js

$(function() { 
    $('#pieces').imagesLoaded(function() { 
    var $grid = $('#pieces').isotope({ 
     itemSelector: '.box', 
     isFitWidth: true, 
     getSortData: { 
     title: function(itemElem) { 
      var title = $(itemElem).find('.title').text(); 
      return title; 
     }, 
     price: function(itemElem) { 
      var rawPrice = $(itemElem).find('.price').text(); 
      var price = parseFloat(rawPrice.replace(/[$\s]/g, '')); 
      return price; 
     } 
     } 
    }); 


    $('.filter-button-group').on('click', 'a', function() { 
     var filterValue = $(this).attr('data-filter'); 
     $grid.isotope({ filter: filterValue }); 
    }); 

    $('.sort-by-button-group').on('click', 'a', function() { 
     var sortByValue = $(this).data('sort-by'); 
     if (sortByValue) { 
     var ascending = true; 
     if ($(this).data('descending') === true) { 
      ascending = false; 
     } 
     $grid.isotope({ sortBy: sortByValue, sortAscending: ascending }); 
     } 
    }); 
    }); 
}); 

index.html.erb (die Hauptseite)

<div class="button-group center" role="group" aria-label="Filter and Sort"> 
    <!-- Sort stuff, this all works --> 
</div> 

<div id="pieces" class="transitions-enabled"> 
    <% @pieces.each do |piece| %> 
    <div class="box panel panel-default <%= piece.genre %>"> 
     <!-- piece content --> 
    </div> 
    <% end %> 
</div> 

pieces.scss

#pieces { 
    margin: 0 auto; 
} 

.box { 
    margin: 5px; 
    width: 214px; 
} 

.box img { 
    width: 100%; 
} 

.panel-default .panel-heading img { 
    width: 100%; 
} 


.isotope, 
.isotope .isotope-item { 
    /* change duration value to whatever you like */ 
    -webkit-transition-duration: 0.8s; 
    -moz-transition-duration: 0.8s; 
     -ms-transition-duration: 0.8s; 
     -o-transition-duration: 0.8s; 
      transition-duration: 0.8s; 
    } 

.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; 
} 

Answer 1

Die aktuelle Version des Isotops (v3) benötigt keine .iso top css, FYI. Die Option isFitWidth ist jetzt fitWidth und wie folgt verwendet:

$('#pieces').imagesLoaded(function() { 
var $grid = $('#pieces').isotope({ 
    itemSelector: '.box', 
    masonry: { 
//columnWidth: 100, // You may need to set this value for your specific layout 
fitWidth: true 
} 
    getSortData: { 
    title: function(itemElem) { 
     var title = $(itemElem).find('.title').text(); 
     return title; 
    }, 
    price: function(itemElem) { 
     var rawPrice = $(itemElem).find('.price').text(); 
     var price = parseFloat(rawPrice.replace(/[$\s]/g, '')); 
     return price; 
    } 
    } 
});