,,

Shuffle.js，一款神奇的 JavaScript 開源庫，對響應(yīng)式項(xiàng)目網(wǎng)格進(jìn)行分類、排序和過濾

當(dāng)前位置：點(diǎn)晴教程→知識管理交流 →『技術(shù)文檔交流』

admin

2024年10月12日 10:0 本文熱度 956

? Github Star: 2.4k[1]
? 官網(wǎng)[2]

1、Shuffle.js 是什么？

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

1. 網(wǎng)格布局: 可以將一組項(xiàng)目排列成一個響應(yīng)式的網(wǎng)格布局，并根據(jù)窗口大小自動調(diào)整布局。
2. 排序: 允許你根據(jù)不同的條件對網(wǎng)格中的項(xiàng)目進(jìn)行排序，例如字母順序、數(shù)字順序或自定義的排序規(guī)則。
3. 過濾: 支持根據(jù)不同的條件對網(wǎng)格中的項(xiàng)目進(jìn)行過濾，例如類別、標(biāo)簽或自定義的過濾規(guī)則。
4. 動畫: 提供流暢的動畫效果，可以使網(wǎng)格布局的更新更加自然和美觀。

2、效果預(yù)覽

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

條件排序

元素過濾

3、快速開始

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

npm install shufflejs
# 或
yarn add shufflejs

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

// 根據(jù)圖片對象生成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 示例對象及配置選項(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 一個 DOM 元素，表示要進(jìn)行排序和過濾的容器。options 一個可選的對象，用于配置 Shuffle.js 的行為，例如：itemSelector一個 CSS 選擇器，用于選擇容器中的項(xiàng)目元素。sizer 一個 DOM 元素，用于確定網(wǎng)格布局的尺寸。

4、核心 API

Shuffle.js 核心 API 包含幾個部分：

排序項(xiàng)目

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

// 根據(jù)圖片對象生成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 對排序結(jié)果進(jìn)行反轉(zhuǎn)。

過濾項(xiàng)目

shuffle .filter(filterGroup);

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

重新排列

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

祝好！