调整浏览器大小时同位素项消失

Question

我用复选框砍了一个同位素组合过滤器，但这是同位素项目的问题。 调整浏览器窗口大小时，它们消失了。

我不知道为什么在更改浏览器大小时它们不显示！

请帮助！！

通常我使用同位素V2。 在JSFiddle中 ，窗口大小调整了np，但是我使用了同位素v1。

我疯了，当物品消失时，我需要单击选择按钮来触发，然后一切正常。

var $containerii;
    var filters = {};


jQuery(document).ready(function () {

    var $containerii = $('.isotope').isotope({
        itemSelector: '.isotope-item'

    });



    getContent: '.isotope-item li'

    var $filterDisplay = $('#filter-display');

    $containerii.isotope();
    // do stuff when checkbox change
    $('#options').on('change', function (jQEvent) {
        var $checkbox = $(jQEvent.target);
        manageCheckbox($checkbox);

        var comboFilter = getComboFilter(filters);

        $containerii.isotope({ filter: comboFilter });

        $filterDisplay.text(comboFilter);
    });


});




function getContent() {

    var items = document.getElementById("containerii")
}







 function getComboFilter(filters) {
   var i = 0;
   var comboFilters = [];
   var message = [];

   for (var prop in filters) {
      message.push(filters[prop].join(' '));
      var filterGroup = filters[prop];
      // skip to next filter group if it doesn't have any values
      if (!filterGroup.length) {
          continue;
      }
      if (i === 0) {
          // copy to new array
          comboFilters = filterGroup.slice(0);
      } else {
          var filterSelectors = [];
          // copy to fresh array
          var groupCombo = comboFilters.slice(0); // [ A, B ]
          // merge filter Groups
          for (var k = 0, len3 = filterGroup.length; k < len3; k++) {
              for (var j = 0, len2 = groupCombo.length; j < len2; j++) {
                  filterSelectors.push(groupCombo[j] + filterGroup[k]); // [ 1, 2 ]
              }

          }
          // apply filter selectors to combo filters for next group
          comboFilters = filterSelectors;
      }
      i++;
  }

  var comboFilter = comboFilters.join(', ');
  return comboFilter;
 }

function manageCheckbox($checkbox) {
  var checkbox = $checkbox[0];

  var group = $checkbox.parents('.option-set').attr('data-group');
  // create array for filter group, if not there yet
  var filterGroup = filters[group];
  if (!filterGroup) {
      filterGroup = filters[group] = [];
  }

  var isAll = $checkbox.hasClass('all');
  // reset filter group if the all box was checked
  if (isAll) {
      delete filters[group];
      if (!checkbox.checked) {
          checkbox.checked = 'checked';
      }
  }
  // index of
  var index = $.inArray(checkbox.value, filterGroup);

  if (checkbox.checked) {
      var selector = isAll ? 'input' : 'input.all';
      $checkbox.siblings(selector).removeAttr('checked');


      if (!isAll && index === -1) {
          // add filter to group
          filters[group].push(checkbox.value);
      }

  } else if (!isAll) {
      // remove filter from group
      filters[group].splice(index, 1);
      // if unchecked the last box, check the all
      if (!$checkbox.siblings('[checked]').length) {
          $checkbox.siblings('input.all').attr('checked', 'checked');
      }
  }

}

Answer 1

如果您使用的是同位素v2，请尝试以下操作：

var $containerii = $('.isotope').isotope({
    itemSelector: '.isotope-item',
    isResizeBound: true
});

v1.5， 此：

附录

我没有看到任何消失，只是在调整窗口大小时col-md-10下移了。 我更改了布局以免发生变化，并且似乎按照需要调整了大小。

的jsfiddle

Answer 2

非常感谢您的帮助和宝贵的意见。 最后，我在代码末尾对窗口调整大小使用了触发同位素，从而解决了我的问题。

 $(window).on('resize', function () {
     $containerii = $('.isotope');
     triggerIsotope();
 });