NPM包jquery.isotope使用教程

简介

jQuery Isotope是一个流式布局库，它可以帮助我们实现瀑布流式的布局效果。通过使用Isotope，我们可以快速地创建具有吸引力的网格布局，而不需要手动计算和定位每个元素。

安装

我们可以通过npm安装jquery.isotope：

npm install isotope-layout --save

初始化

在页面中，我们需要引入jQuery和Isotope的JavaScript文件，并在需要使用Isotope的元素上调用isotope()方法。

HTML结构

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

CSS样式

.grid{
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  width: 25%;
}

JavaScript代码

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    columnWidth: '.grid-item'
  }
});

API

Isotope提供了一些常用的API来帮助我们控制布局。

filter函数

filter函数允许我们根据选择器过滤元素。例如，我们可以使用以下代码隐藏所有未被选中的项：

$grid.isotope({ filter: ':not(.selected)' });

shuffle函数

shuffle函数可以随机排列元素。例如，以下代码将重新排列元素：

$grid.isotope('shuffle');

sortBy函数

sortBy函数可以根据我们提供的属性对元素进行排序。例如，以下代码将按字母顺序对元素进行排序：

$grid.isotope({
  sortBy: 'name'
});

示例代码

下面是一个完整示例的HTML、CSS和JavaScript代码：

HTML

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

CSS

.grid{
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  width: 25%;
}

JavaScript

-- -------------------- ---- -------
--- ----- - --------------------
  ------------- -------------
  ---------------- -----
  -------- -
    ------------ ------------
  -
---

-- ------
----------------------------- -------- --------- ---------- -
  --- ----------- - ----------------------------

  -- ----
  --------------- ------- ----------- ---
---

-- ------
-------------------------------- ---------- -
  -------------------------
---

-- -------
------------------------------------- ---------- -
  ---------------
    ------- ------
  ---
---

结论

通过使用Isotope，我们可以快速简便地创建吸引人的网格布局，而不需要手动计算和定位每个元素。Isotope提供了灵活的API，使我们可以轻松地控制布局。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32581