Filterizr.js --- jquery过滤插件

filterizr.js

部分学习要点记录

插件的github地址：https://github.com/giotiskl/Filterizr

项目配置文件中可查看 其引用的jQuery版本

源码中的默认配置项

// Default options
const options = {
  animationDuration: 0.5, // in seconds
  callbacks: { 
    onFilteringStart: function() { },
    onFilteringEnd: function() { },
    onShufflingStart: function() { },
    onShufflingEnd: function() { },
    onSortingStart: function() { },
    onSortingEnd: function() { }
  },
  controlsSelector: '', // Selector for custom controls
  delay: 0, // Transition delay in ms
  delayMode: 'progressive', // 'progressive' or 'alternate'
  easing: 'ease-out',
  filter: 'all', // Initial filter
  filterOutCss: { // Filtering out animation
    opacity: 0,
    transform: 'scale(0.5)'
  },
  filterInCss: { // Filtering in animation
    opacity: 0,
    transform: 'scale(1)'
  },
  gridItemsSelector: '.filtr-container',
  gutterPixels: 0, // Items spacing in pixels
  layout: 'sameSize', // See layouts
  multifilterLogicalOperator: 'or',
  searchTerm: '',
  setupControls: true, // Should be false if controlsSelector is set 
  spinner: { // Configuration for built-in spinner
    enabled: false,
    fillColor: '#2184D0',
    styles: {
      height: '75px',
      margin: '0 auto',
      width: '75px',
      'z-index': 2,
    },
  },
} 

使用

$('.filterbox').filterizr();//.filterbox 是过滤的内容

jq22上的插件演示