Question

我在轨道上使用ruby，并且遇到了一些前端问题。我刚刚将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;
    }
  }
 });

同位素不是

1 个答案: