twitter-bootstrap-3 - 同位素和 Bootstrap3 : Content divs disappear on sorting

Question

这一定很简单，但我很困惑。

内容divs排序时消失。

我错过了正确的 data-filter ?或 display:none或 display:block ?

代码笔:http://codepen.io/anon/pen/oYXXPq (您可以克隆它以进行更改。)

HTML:

<ul id="filters">
  <li><a href="#" data-filter="*">Everything</a></li>
<li><a href="#" data-filter="blog">Blog</a></li>
<li><a href="#" data-filter="ciso">CISO</a></li>
<li><a href="#" data-filter="labs">LABS</a></li>
</ul>

<div class="container-fluid">
  <div id="isotope-blog">
  <div class="grid">
    <div class="grid-sizer col-xs-12 col-md-6"></div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content blog">Blog Blog Blog</div>
    </div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content blog">Blog Blog Blog</div>
    </div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content ciso">CISO CISO CISO</div>
    </div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content labs">LABS LABS LABS</div>
    </div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content labs">LABS LABS LABS</div>
    </div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content labs">LABS LABS LABS</div>
    </div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content ciso">CISO CISO CISO</div>
    </div><div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content security-blog">BLOG BLOG BLOG</div>
    </div>
  </div>
  </div>
</div>

CSS:

.grid-item-content {
  max-height: 120px;
  background: #0D8;
  border: 2px solid #000;
  overflow:hidden;
}

.container-fluid {
 max-width:1200px;
}

jQuery:

jQuery(function ($) {

    var $container = $('#isotope-blog'); //The ID for the list with all the blog posts
    $container.isotope({ //Isotope options, 'item' matches the class in the PHP
        itemSelector : '.item', 
        layoutMode : 'masonry'
    });

    //Add the class selected to the item that is clicked, and remove from the others
    var $optionSets = $('#filters'),
    $optionLinks = $optionSets.find('a');

    $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('#filters');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');

    //When an item is clicked, sort the items.
     var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });

    return false;
    });

});

Answer 1

这现在有效:http://codepen.io/anon/pen/oYXXPq

它是一个两列 Masonry 和 Bootstrap 布局，可通过 grid-item 中的过滤器类进行排序。 div 元素。过滤器类可以是多个不同的类。

问题是:

我的 HTML 标记过于复杂和错误；它需要采用以下格式:

<div class="container">

  <div class="isotope-list">

    <div class="row">

      <div class="grid-item blog">OneOneOneOne Blog Blog Blog</div>

      <div class="grid-item blog">TwoTwoToTwoTwoTwo Blog Blog Blog </div>

and on and on...

 </div>
  </div>

需要一些小的改动CSS .

还有我的 Javascript 需要对所选类别进行更新和清除:

var selectedCategory;

var $grid = $('.isotope-list').isotope({
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 160,
    gutter: 20
  },
  getSortData: {
    selectedCategory: function( itemElem ) {
      return $( itemElem ).hasClass( selectedCategory ) ? 0 : 1;
    }
  }
});

var $items = $('.row').find('.grid-item');

$('.sort-button-group').on( 'click', '.button', function() {
  // set selectedCategory
  selectedCategory = $( this ).attr('data-category');
  if ( selectedCategory == 'all' ) {
    $grid.isotope({
      sortBy: 'original-order'
    });

  }

  // update sort data now that selectedCategory has changed
  $grid.isotope('updateSortData');
  $grid.isotope({ sortBy: 'selectedCategory' });
});

  // change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});