如何使用数据属性在同位素上添加“中心砌体”

【问题标题】：How to add "centered masonry" on isotope using data-attribute如何使用数据属性在同位素上添加“中心砌体”
【发布时间】：2016-02-18 14:53:56
【问题描述】：

我正在使用具有数据属性的同位素。我想在每个过滤器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>

【问题讨论】：

标签： jquery css custom-data-attribute masonry jquery-isotope

【解决方案1】：

在 Isotope 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;
    }

codepen：http://codepen.io/desandro/pen/BptxJ

【讨论】：

谢谢。这有点帮助，但我使用的是引导程序.col-*，而不是固定宽度。当我过滤项目时，.row 折叠到 .col-* 填充只是因为 .row 项目取决于它们的父项，所以我的项目宽度是 2rem。
所以尝试砌体：{ columnWidth: '.grid-item', isFitWidth: true }
那是我已经尝试过的。正如我所说，col-* 宽度在% 中，它们取决于.row。这不是那么令人困惑，但很难解释。