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

Isotope 分类过滤和排序 jQuery 插件

发布于 2020-04-29 字数 3141 浏览 1822 评论 0

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

Isotope 分类过滤和排序 jQuery 插件

安装

下载源代码

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实体使用双引号 "

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

nuj316

文章 0 评论 0

梦中楼上月下

文章 2 评论 0

kook

文章 0 评论 0

thousandcents

文章 0 评论 0

像你

文章 1 评论 0