동위 원소가 센터링되지 않습니다.

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가 필요하지 않습니다. 톱 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; 
    } 
    } 
});