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

时间:2016-02-17 14:55:36

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

我正在使用带有数据属性的同位素。我想在每个过滤器Centered Masonry上添加以数据为中心=“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>

1 个答案:

答案 0 :(得分:0)

在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