同位素不居中

Question

我在軌道上使用紅寶石，並有一些前端的麻煩。我剛剛將JQuery砌體轉換成同位素。在砌體工程中，我的模型（稱爲件）正確對中和動畫。現在，使用同位素，動畫正在工作，但這一切都發生在一邊，而不是在頁面的中心。我怎樣才能解決這個問題？

更新：砌體代碼

這是與中心工作了，只能用磚石（在pieces.js）的代碼。我正在從這個軌道寶石加載同位素：https://github.com/kristianmandrup/masonry-rails。網站可以在https://www.metallicpalette.com/pieces查看。

$(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（主頁）

<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

當前版本同位素（v3）不需要.iso FYI。該選件isFitWidth現在是fitWidth和使用方法如下：

$('#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; 
    } 
    } 
});