Question

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

当我改变浏览器的大小时，我不知道为什么他们没有显示！

请帮助!!

Normaly我使用同位素V2。在JSFiddle中，有np窗口调整大小但是我使用了isotope 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，this:

附录

我没有看到任何消失，只有当你调整窗户大小时，col-md-10向下移动。我改变了布局以避免移位，它似乎应该调整大小。

jsfiddle

Answer 2

非常感谢您的帮助和宝贵的回复。最后，我通过在代码末尾的窗口调整大小时使用触发同位素解决了我的问题。

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

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

2 个答案: