html分类过滤排序,Isotope 分类过滤和排序 jQuery 插件 - 文章教程

Isotope 可以通过 filter 参数选项隐藏和显示元素 items。匹配的 items 被显示，不匹配的 items 被隐藏。

安装

下载源代码

CDN 加速

直接链接到 unpkg.

包管理器

使用 NPM 安装： npm install isotope-layout

用 Bower 安装： bower install isotope-layout --save

使用方法

HTML

引入 .js 在你的网页中：

每一个 item 元素都有一组用于识别的 class：

...

...

...

...

CSS

所有大小的项目都由您的CSS处理。

.grid-item { width: 25%; }

.grid-item--width2 { width: 50%; }

用 jQuery 初始化

您可以使用同一组元素作为jQuery插件：$('selector').isotope().

$('.grid').isotope({

// options

itemSelector: '.grid-item',

layoutMode: 'fitRows'

});

用 Vanilla JavaScript 初始化

你可以用同一组元素和 Vanilla JS：new Isotope( elem, options )。这个 Isotope() 构造函数接受两个参数：容器元素和 Options 对象。

var elem = document.querySelector('.grid');

var iso = new Isotope( elem, {

// options

itemSelector: '.grid-item',

layoutMode: 'fitRows'

});

// element argument can be a selector string

// for an individual element

var iso = new Isotope( '.grid', {

// options

});

在HTML中初始化

您可以在 HTML 中初始化同一组元素，而无需编写任何JavaScript。加 data-isotope 属性设置为容器元素。Options 可以用它的值来设置。

HTML中设置的选项必须是有效的 JSON。例如，需要引用键"itemSelector":。注意HTML属性 data-isotope 是用单引号设置的 '，但是JSON实体使用双引号 "。

相关链接