Isotope 分类过滤和排序 jQuery 插件

Question

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

安装

下载源代码

• isotope.pkgd.js 未压缩版
• isotope.pkgd.min.js 压缩版

CDN 加速

直接链接到 unpkg.

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

包管理器

使用 NPM 安装： npm install isotope-layout

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

使用方法

HTML

引入 .js 在你的网页中：

<script src="/path/to/isotope.pkgd.min.js"></script>

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

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

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 可以用它的值来设置。

<div class="grid" data-isotope='{ "itemSelector": ".grid-item", "layoutMode": "fitRows" }'>

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

相关链接

• 官网：https://isotope.metafizzy.co/