如何使用数据属性在同位素上添加 "centered masonry"

Question

我正在使用具有数据属性的同位素。我想在每个过滤器 Centered Masonry 上添加 data-centered="true/false"。有什么建议吗？

$('.js-isotope').imagesLoaded( function() {
  $('.js-isotope').isotope('layout');
});

<div class="row grid js-isotope" data-isotope-options='{ "itemSelector": ".grid-item", "layoutMode": "masonry"}'>
   <div class="col-xs-6 col-sm-4 grid-item">
     ...
   </div>
  <div class="col-xs-6 col-sm-4 grid-item">
     ...
  </div>
  <div class="col-xs-6 col-sm-4 grid-item">
     ...
  </div>
</div>

Answer 1

在同位素 v2 中使用 isFitWidth http://isotope.metafizzy.co/layout-modes/masonry.html#isfitwidth

masonry: {
  columnWidth: 100,
  isFitWidth: true
}

css

/* center container with CSS */
    .grid {
      margin: 0 auto;
    }

代码笔：http://codepen.io/desandro/pen/BptxJ