无限涡旋滤光片的同位素v2滤波--没有找到所有的项目，窗口没有在过滤器上调整大小

Question

抬头了！

在同位素的GitHub回购上有一个未决的GitHub，如果您对此有兴趣查看官方文档和演示(如何将同位素、无限滚动、过滤和排序结合起来)，您应该添加一个"“反应。它是由同位素的创建者为评估兴趣而开设的。如果有兴趣，请投！

**TL;DR:为了帮助获取官方文档和演示，*

试图拼凑一个可过滤的布局使用同位素JS插件和保罗爱尔兰(可悲地没有维护)的无限涡旋插件。

过滤在某种程度上起作用。最初，它过滤页面1的内容。为了过滤未在第1页上的项目，我需要向下滚动(我想这会带来浏览器内存中的元素，从而使过滤脚本可用吗？)

通过一组用于初始页面内容的复选框(即:第1页上的内容)。

问题1:如何使筛选器对所有页面项都有效？ie:如何引用筛选脚本中的所有元素，甚至那些尚未通过无限滚动带到页面上的元素？

问题2:一旦我向下滚动并且所有元素都是可过滤的，窗口就不会在过滤时调整大小。因此，当只有一两个通过过滤器显示的元素时，仍然可以向下滚动(即使没有显示任何元素)。通过对这些元素的检查，我发现它们仍然在DOM中。

过滤脚本

function filterTags(){
  isotopeInit();

  var $checkboxes = $('#tag-wrap input')

  $checkboxes.change(function(){
    var arr = [];
    $checkboxes.filter(':checked').each(function(){
      var $dataToFilter = $(this).attr('data-filter');
      arr.push( $dataToFilter );
    });
    arr = arr.join(', ');
    $container.isotope({ filter: arr });
  });
};

同位素Init

function isotopeInit(){
  var $container = $('.post-excerpts').imagesLoaded( function() {
    $container.isotope({
      itemSelector: '.post-excerpt-block-wrap',
      layoutMode: 'masonry',
      animationEngine: "best-available",
      masonry: {
        columnWidth: '.post-excerpt-block-wrap' 
      },
      transitionDuration: '2.0',
       hiddenStyle: {
        opacity: 0
      },
      visibleStyle: {
        opacity: 1,
        transform: 'scale(1)'
      }
    });
  });
};

无限涡旋

$container.infinitescroll({
  loading: {
    finished: undefined,
    finishedMsg: "<em>No more posts to load.</em>",
    img: "http://www.infinite-scroll.com/loading.gif",
    msg: null,
    msgText: "<em>Loading the next set of posts...</em>",
    selector: '.infinite-loader',
    speed: 'fast',
    start: undefined
  },
  binder: $(window),
  //pixelsFromNavToBottom: Math.round($(window).height() * 0.9),
  //bufferPx: Math.round($(window).height() * 0.9),
  nextSelector: "a.older-posts",
  navSelector: "nav.pagination",
  contentSelector: ".content",
  itemSelector: ".post-excerpt-block-wrap",
  maxPage: {{pagination.pages}},
  appendCallback: true
},
  // Callback for initializing scripts to added post excerpts
  function(newElements) {
    var $newElems = $( newElements );
    loadImages();
    checkForFeatured();
    makeFontResponsive();
    addReadMoreLinks();
    fitVidInit();
    $newElems.imagesLoaded(function(){
      $container.isotope( 'appended', $newElems );
    });
  }
);

任何想法、建议或其他见解都会受到难以置信的欢迎。在此之前，非常感谢您。

##Update:关于问题2:似乎这个问题与同位素如何被告知过滤项目有关。具体来说，这个来自同位素init函数的代码：

transitionDuration: '2.0',
hiddenStyle: {
  opacity: 0
},
visibleStyle: {
  opacity: 1,
  transform: 'scale(1)'
}

我尝试将其更改为以下内容，尽管这完全消除了DOM (修复间距问题)，并且在“取消筛选”时它们不会返回到DOM中。所以这不是解决办法：

hiddenStyle: {
  display: 'none'
},
visibleStyle: {
  display: 'visible',
  transform: 'scale(1)'
}

我还试过简单地删除这些配置行，这似乎是显而易见的“干净”解决方案，但在过滤时，这也给页面留下了大量的空白。不确定这里的问题是与我的同位素还是无限涡旋实现。

Answer 1

对于第二个问题，您可以做的一件事是在同位素过滤之后，将display:none样式应用于所有隐藏元素(并从所有可见元素中移除)。

我认为你应该能够在正确的时间使用同位素的"on layoutComplete“事件监听器，如下所示：

$container.isotope( 'on', 'layoutComplete',
      function( isoInstance, laidOutItems ) {

          $('.my-elements-class.hiddenStyle').addClass('reallyHiddenStyle');
          $('.my-elements-class.visibleStyle').removeClass('reallyHiddenStyle');
      }
);

当然，要筛选的元素属于css类my-elements-class，您将同位素过滤应用于$container并定义

reallyHiddenStyle: {
  display: 'none'
}

在你的CSS里。

对于问题1，您可能需要使用类似的策略，使用无穷大的回调，在由于滚动而出现的过滤器中添加新元素。您已经将回调作为infinitescroll方法的最后一个参数传递了，因此快速查看一下，类似这样的内容可能会奏效：

$container.isotope('destroy');
$.each(newElements, function (i, el){/** add new elements to arr */});
$container.isotope({ filter: arr });

你有一个可以分享的例子吗？如果你愿意的话，我可以查一下。

Answer 2

要回答问题1，您可以尝试在同位素初始化中使用stamp选项。此选项允许您指定不由同位素布局但仍在筛选器中考虑的元素。可以尝试将以下内容添加到isotopeInit()函数中：

function isotopeInit(){
  var $container = $('.post-excerpts').imagesLoaded( function() {
    $container.isotope({
      // other options...
      stamp: ".infinite-loader", // add this line
    });
  });
}

这将告诉同位素在过滤中包含包含类无限加载器的元素，但不将它们布局。

至于问题2，这个问题很可能与你调用同位素过滤方法的方式有关。在filterTags()函数中，使用arr.join('，')将所有选定的过滤器连接到一个字符串中。这将导致一个类似于".filter1，.filter2，.filter3“的过滤器字符串。然而，这并不是同位素过滤器的正确格式。要正确筛选多个项，您需要使用如下所示的筛选字符串：".filter1.filter2.filter3“。

为了解决这个问题，您可以修改filterTags()函数来连接所选的过滤器。而不是，就像这样：

function filterTags(){
  isotopeInit();

  var $checkboxes = $('#tag-wrap input')

  $checkboxes.change(function(){
    var arr = [];
    $checkboxes.filter(':checked').each(function(){
      var $dataToFilter = $(this).attr('data-filter');
      arr.push( $dataToFilter );
    });
    arr = arr.join('.'); // modify this line
    $container.isotope({ filter: arr });
  });
};

请注意，此更改可能要求您更新HTML数据筛选器属性以包含.字符在开头，就像这样:而不是。

Answer 3

要回答第一个问题，可以尝试从无限滚动的回调函数中调用filterTags()函数。这样，当通过无限滚动将新项添加到页面时，它们将根据选定的标记进行筛选。

$container.infinitescroll({
  // Infinite scroll options...
},
  // Callback for initializing scripts to added post excerpts
  function(newElements) {
    var $newElems = $( newElements );
    loadImages();
    checkForFeatured();
    makeFontResponsive();
    addReadMoreLinks();
    fitVidInit();
    $newElems.imagesLoaded(function(){
      $container.isotope( 'appended', $newElems );
      filterTags();
    });
  }
);

对于第二个问题，问题似乎是过滤器隐藏的项仍然存在于DOM中，但具有显示的样式:没有应用于它们。这意味着它们仍然占据布局中的空间，即使它们是不可见的。要解决这个问题，您可以尝试在项目过滤之后再次调用容器上的同位素()函数。这将导致同位素调整布局，移除隐藏项目占用的空间。可以尝试将以下代码添加到filterTags()函数中：

$checkboxes.change(function(){
  var arr = [];
  $checkboxes.filter(':checked').each(function(){
    var $dataToFilter = $(this).attr('data-filter');
    arr.push( $dataToFilter );
  });
  arr = arr.join(', ');
  $container.isotope({ filter: arr });
  $container.isotope();
});

这将导致同位素在项目过滤后调整布局，这将解决窗口不调整大小的问题。