• ? Github Star: 2.4k[1]

• ? 官網(wǎng)[2]

1、Shuffle.js 是什么？

Shuffle.js 是一個(gè) JavaScript 庫，專門用于簡化響應(yīng)式設(shè)計(jì)的網(wǎng)格布局，通過它可以輕松實(shí)現(xiàn)網(wǎng)格布局，元素排序、過濾、動(dòng)畫等功能。核心功能主要包括：

1. 1. 網(wǎng)格布局: 可以將一組項(xiàng)目排列成一個(gè)響應(yīng)式的網(wǎng)格布局，并根據(jù)窗口大小自動(dòng)調(diào)整布局。

2. 2. 排序: 允許你根據(jù)不同的條件對(duì)網(wǎng)格中的項(xiàng)目進(jìn)行排序，例如字母順序、數(shù)字順序或自定義的排序規(guī)則。

3. 3. 過濾: 支持根據(jù)不同的條件對(duì)網(wǎng)格中的項(xiàng)目進(jìn)行過濾，例如類別、標(biāo)簽或自定義的過濾規(guī)則。

4. 4. 動(dòng)畫: 提供流暢的動(dòng)畫效果，可以使網(wǎng)格布局的更新更加自然和美觀。

2、效果預(yù)覽

動(dòng)態(tài)網(wǎng)格布局

條件排序

元素過濾

3、快速開始

首先，安裝 Shuffle.js 通過包管理工具 npm 或 yarn。執(zhí)行下面命令：

npm install shufflejs
# 或
yarn add shufflejs

使用 Vite 創(chuàng)建一個(gè) Vanilla JavaScript 演示項(xiàng)目，下面是核心代碼，完整代碼公眾號(hào)回復(fù) “demo” 獲取。

// 根據(jù)圖片對(duì)象生成tile的HTML字符串
const tile = (obj) => {
  return `
  <figure class="js-item column ${obj.variant || ''}">
      <div class="aspect aspect--${ratio(obj.variant)}">
          <div class="aspect__inner">
              <img src="${obj.src}" alt="${obj.alt}">
          </div>
      </div>
  </figure>`
}
// 獲取頁面元素并設(shè)置其內(nèi)部HTML為生成的Shuffle布局
document.querySelector('#page').innerHTML = `
  <div class="container">
    <h1>
        <a >Shuffle</a>模板
    </h1>
    <div class="js-grid my-shuffle">${images
      .map((item) => tile(item))
      .join('')}</div>
  </div>
`

不引入 Shuffle.js 效果，明顯看出圖像元素排列存在空位。

初始化 Shuffle 示例對(duì)象及配置選項(xiàng)。

// 創(chuàng)建Shuffle實(shí)例并配置選項(xiàng)
const shuffle = new Shuffle(document.querySelector('.my-shuffle'), {
  itemSelector: '.js-item',
  sizer: '.js-sizer',
  buffer: 1,
})

container 一個(gè) DOM 元素，表示要進(jìn)行排序和過濾的容器。options 一個(gè)可選的對(duì)象，用于配置 Shuffle.js 的行為，例如：itemSelector一個(gè) CSS 選擇器，用于選擇容器中的項(xiàng)目元素。sizer 一個(gè) DOM 元素，用于確定網(wǎng)格布局的尺寸。

4、核心 API

Shuffle.js 核心 API 包含幾個(gè)部分：

排序項(xiàng)目

每個(gè)項(xiàng)目都有一個(gè) data-title 屬性，用于排序。例如：

// 根據(jù)圖片對(duì)象生成tile的HTML字符串
const tile = (obj) => {
  return `
  <figure class="js-item column ${obj.variant || ''}" data-title="${obj.alt}">
  // ...
  </figure>`
}
// 定義排序
const addSorting = () => {
  document.querySelector('.sort-options').addEventListener('change', (event) => {
    const value = event.target.value;
    function sortByTitle(element) {
      return element.dataset.title.toLowerCase();
    }
    let options = {};
    if (value === 'title') {
      options = {
        by: sortByTitle,
      };
    }
    shuffle.sort(options);
  });
}
addSorting()

定義排序規(guī)則，其中 by 以元素作為參數(shù)的函數(shù)。randomize 隨機(jī)順序排序；reverse 對(duì)排序結(jié)果進(jìn)行反轉(zhuǎn)。

過濾項(xiàng)目

shuffle .filter(filterGroup);

filterGroup: 一個(gè)字符串，表示要過濾的組別。

重新排列

shuffle .shuffle();

隨機(jī)排列項(xiàng)目。

其他方法

• ? destory: 銷毀 Shuffle.js 實(shí)例

• ? update: 更新 Shuffle.js 實(shí)例，例如在添加或刪除項(xiàng)目后。

• ? on: 綁定事件監(jiān)聽器，例如監(jiān)聽排序或過濾完成事件。

• ? off: 移除事件監(jiān)聽器。

5、總結(jié)

Shuffle.js 是一個(gè)功能強(qiáng)大的 JavaScript 庫，它通過提供網(wǎng)格布局、排序、過濾和動(dòng)畫等核心功能，簡化了響應(yīng)式設(shè)計(jì)的工作。使用 Shuffle.js 可以輕松創(chuàng)建動(dòng)態(tài)和美觀的網(wǎng)格布局，無論是在圖片庫、產(chǎn)品列表還是文章展示中，都能實(shí)現(xiàn)用戶友好的交互體驗(yàn)。

祝好！

引用鏈接

[1] Github Star: 2.4k: https://github.com/Vestride/Shuffle
[2] 官網(wǎng): https://vestride.github.io/Shuffle/