Question

有没有办法通过点击事件显示带滚动显示的所有项目？ 也许是显示所有功能？

问题：

我正在使用滚动显示以及同位素。同位素的分选功能与滚动显示反应奇怪。

当我点击“过滤器”按钮时，我正在调用同位素功能过滤器。

 $grid.isotope({filter: '.fish-filter'}); // example

然而，如果我在点击所述文件管理器按钮后向下滚动，我的网格中就会出现漏洞，我必须在通过滚动显示所有项目后“重新点击”按钮

谢谢！

更新

我在这里添加了布局调用 - 这至少修复了之前存在的漏洞：

window.sr = ScrollReveal({
    beforeReveal: function (domEl) {
        //$grid.isotope( 'layout'); // fixes holes
    },
    afterReveal: function (domEl) {
        $grid.isotope('layout');
    }
});

然而 - 新过滤的物品没有“淡入”，因为它们用滚动显示它们“平铺”与同位素的样式一样。理想的情况是揭示所有和布局场景 - 这种方式你不会注意到动画中的任何差异 - 或者另一种情况可能只是简单的恒定衰落而不管过滤器点击。

更新更新

我们决定让所有瓷砖的高度相同，以便不再遇到问题。

由于

Answer 1

Isoptope有一个名为relayout的功能。您可以像$grid.isotope( 'reLayout', callback )

一样使用它

您可以阅读文档here

考虑到您遇到的问题，此功能可能更有用。

然而，具体回答你的问题：同位素只需添加一个类来隐藏项目，因此您可以重置＆＃39;通过使用这样的函数

$('button').on('click', function() { 
    //You can reset the CSS 
    $('.isotope-hidden').removeClass('isotope-hidden');
    //Or you can use the isotope filter reset. 
    $grid.isotope({ filter: '*' });
});

ScrollReveal.js - 显示点击或事件中的所有项目？

1 个答案: