jquery和CSS3图片排序过滤搜索插件

简介: Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。

Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。

tx000483.png

在线预览 下载

Filterizr的特点还有:

  • 轻量级,压缩后的版本仅10.5k。
  • 响应式设计。
  • 支持移动设备,已为移动设备做了优化,显示更流畅。
  • 支持IE10+以上的所有现代浏览器。

安装

可以通过npm或bower来安装Filterizr插件。

npm install filteriz
bower install filteriz

使用方法

在页面中引入jquery和jquery.filterizr.min.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/jquery.filterizr.min.js"></script>

HTML结构
要使用Filterizr插件你必须有一个图片画廊。为每一张图片的容器添加filtr-item class类,用data-category属性来为图片进行分类,多个分类之间使用逗号分隔。如需要排序,需要添加data-sort属性。

<div class="filtr-container">
  <div class="filtr-item" data-category="1" data-sort="value">
    <img src="img/sample.jpg" alt="sample">
  </div>
  <div class="filtr-item" data-category="2, 1" data-sort="value">
    <img src="img/sample.jpg" alt="sample">
  </div>
  <div class="filtr-item" data-category="1, 3" data-sort="value">
    <img src="img/sample.jpg" alt="sample">
  </div>
</div>

然后你还需要设置一些控制按钮。

<ul>
  <!-- For filtering controls add -->
  <li data-filter="all"> All items </li>
  <li data-filter="1"> Category 1 </li>
  <li data-filter="2"> Category 2 </li>
  <li data-filter="3"> Category 3 </li>
  <!-- For a shuffle control add -->
  <li data-shuffle> Shuffle items </li>
  <!-- For sorting controls add -->
  <li data-sortAsc> Ascending </li>
  <li data-sortDesc> Descending </li>
</ul>
<!-- To choose the value by which you want to sort add -->
<select data-sortOrder>
  <option value="domIndex"> Position </option>
  <option value="sortData"> Custom Data </option>
</select>

初始化插件
在页面DOM元素加载完毕之后,通过filterizr方法来初始化插件。

var filterizd = $('.filtr-container').filterizr({
   
   //配置参数
});                 
filterizr插件的可用配置参数如下:

//Default options
var options = {
   
   animationDuration: 0.5, //in seconds
   filter: 'all', //Initial filter
   callbacks: {
    
      onFilteringStart: function() {
    },
      onFilteringEnd: function() {
    },
      onShufflingStart: function() {
    },
      onShufflingEnd: function() {
    },
      onSortingStart: function() {
    },
      onSortingEnd: function() {
    }
   },
   delay: 0, //Transition delay in ms
   delayMode: 'progressive', //'progressive' or 'alternate'
   easing: 'ease-out',
   filterOutCss: {
    //Filtering out animation
      opacity: 0,
      transform: 'scale(0.5)'
   },
   filterInCss: {
    //Filtering in animation
      opacity: 0,
      transform: 'scale(1)'
   },
   layout: 'sameSize', //See layouts
   selector: '.filtr-container',
   setupControls: true
} 
//You can override any of these options and then call...
var filterizd = $('.filtr-container').filterizr(options);
//If you have already instantiated your Filterizr then call...
filterizd.filterizr('setOptions', options);
相关文章
|
1月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
50 22
|
2月前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
2月前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
71 21
|
2月前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
75 16
|
2月前
|
JavaScript
jQuery和CSS3精美翻页式电子时钟特效
jQuery和CSS3精美翻页式电子时钟特效
|
2月前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
8月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
86 1
|
移动开发 JavaScript HTML5
jQuery工具提示插件tooltip.js 使用教程
jQuery工具提示插件tooltip.js 使用教程
|
前端开发 JavaScript
13个超级有用的 jQuery 内容滚动插件和教程
  这篇文章与大家分享13个超级有用的 jQuery 内容滚动插件和教程。您可能经常能看到一些网站上特色区域的内容以滚动方式变化,这是一种在有限的网页空间内展示更多内容的良好方式,而且能吸引用户注意力。
1086 0
|
前端开发 JavaScript
12个精美的jQuery幻灯片效果插件和教程
  这篇文章与大家分享12个精美的的 jQuery 幻灯片效果插件和教程。您可能经常能看到一些网站上特色区域的内容以滚动方式变化,这是一种在有限的网页空间内展示更多内容的良好方式,而且能吸引用户注意力。
1083 0

热门文章

最新文章