同位素未居中

Question

我在轨道上使用红宝石，并且遇到一些前端问题。 最近，我刚刚将JQuery的砌体形式转换为同位素。 在砌筑中，我的模型（称为“碎片”）处于正确的居中和动画效果。 现在，有了同位素，动画就可以了，但是这一切都发生在侧面，而不是在页面中心。 我怎样才能解决这个问题？

更新：砌体代码

这是仅使用石工（在pieces.js中）进行居中的代码。 我正在从以下rails gem加载同位素： 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）不需要.isotope css 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;
    }
  }
 });