Question

抬头！

在Isotope的GitHub回购中有待处理的feature-request issue您应该添加＆＃34;＆＃34;如果您有兴趣看到官方文档和演示（如何组合同位素，无限滚动，过滤和排序），则会有所反应。它由Isotope的创造者打开以衡量兴趣。如果有兴趣，请upvote！

TL; DR：为了帮助获得官方文档和演示，go here and add a "" reaction.

尝试使用Isotope JS plugin和保罗爱尔兰人（遗憾地保持不变）Infinite Scroll plugin拼凑可过滤的布局。

过滤有点起作用。最初它过滤第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 });
  });
};

Isotope 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 );
    });
  }
);

任何想法，建议或其他见解都令人非常欢迎。非常感谢提前。

更新

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

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

我已尝试将其更改为以下内容，但这会完全删除DOM（修复间距问题），并且在＆＃34;未过滤＆＃34;后，它们不会返回到DOM中。他们。所以它不是解决方案：

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

我也试过简单地将这些配置行一起删除，这看起来很明显＆＃34; clean＆＃34;解决方案，但这仍然会在过滤时在页面上留下大量空白区域。不确定这里的问题是我的Isotope还是Infinite Scroll实现。

Answer 1

对于问题2，您可以做的一件事是在同位素过滤后将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，也许您需要使用infinitescrolling回调的类似策略，一旦它们出现因为滚动而向过滤器添加新元素。您已将回调作为infinitescroll方法的最后一个参数传递，因此快速查看似乎这样的内容可能有效：

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

你有一个可以分享的工作实例吗？如果你愿意，我可以查看一下。

使用无限滚动进行同位素v2过滤 - 过滤器未找到所有项目且窗口未在过滤器上调整大小

更新

1 个答案: