• ? Github Star: 2.2k[1]

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

InfiniteGrid 是什么？

InfiniteGrid 是一個高性能的響應(yīng)式網(wǎng)格布局庫，由 Naver 公司開發(fā)。它允許開發(fā)者創(chuàng)建各種類型的網(wǎng)格布局，如瀑布流、整齊排列或框架布局，并支持多平臺，包括桌面端、移動端以及主流前端框架的集成，如 Angular、React、Vue 和 Svelte。

InfiniteGrid 的核心在于其高效的 DOM 管理和性能優(yōu)化策略，通過維持較低的 DOM 數(shù)量來保證流暢的用戶體驗，即使在元素大小不一的情況下也能快速響應(yīng)。

核心功能

網(wǎng)格類型

InfiniteGrid 支持多種布局類型，包括 MasonryInfiniteGrid（瀑布流布局）、JustifiedInfiniteGrid、FrameInfiniteGrid 和 PackingInfiniteGrid，適用于不同的展示需求。

MasonryInfiniteGrid MasonryInfiniteGrid 是一種網(wǎng)格，用于堆疊與一堆磚塊寬度相同的項目。將所有圖像的寬度調(diào)整為相同大小，找到高度最低的列，然后插入新項目。

JustifiedInfiniteGrid “justified”是一個印刷術(shù)語，意思是“它適合一行寬”。 JustifiedGrid 是根據(jù)給定大小的線填充項目的網(wǎng)格。stretch基本上可以打破項目的比例并拉伸內(nèi)聯(lián)尺寸以填充容器。如果將sizeRange范圍設(shè)置得窄，則可以很好地拉伸。

FrameInfiniteGrid “框架”是一個印刷術(shù)語，意思是“它適合一行寬”。 FrameGrid 是在給定尺寸的線條的基礎(chǔ)上填充項目的網(wǎng)格。

PackingInfiniteGrid

框架融合

InfiniteGrid 支持多種前端框架，如 Angular、React、Vue、Svelte 等，易于集成到現(xiàn)有的項目中 。

• ? @egjs/vue3-infiniteGrid

• ? @egjs/react-infiniteGrid

快速開始

InfiniteGrid 提供了多種安裝方式 npm 或 yarn、CDN 等方式。

npm install --save @egjs/infinitegrid
# CDN 引入
<script src="https://unpkg.com/@egjs/infinitegrid/dist/infinitegrid.min.js"></script>

定義容器 DOM 元素

<div class="container"></div>

通過 ES 模塊引入到項目中。

// 導入 MasonryInfiniteGrid 類，它是 @egjs/infinitegrid 庫的一部分，用于創(chuàng)建瀑布流布局。
import { MasonryInfiniteGrid } from "@egjs/infinitegrid";
// 定義 getItems 函數(shù)，它生成一組新的項目元素。
function getItems(nextGroupKey, count) {
  const nextItems = []; // 初始化一個空數(shù)組來存放生成的項目。
  // 循環(huán)創(chuàng)建 count 個項目。
  for (let i = 0; i < count; ++i) {
    const num = nextGroupKey * count + i; // 計算每個項目的編號。
    nextItems.push(`<div class="item"></div>`); // 將一個新項目添加到數(shù)組中。
  }
  return nextItems; // 返回生成的項目數(shù)組。
}
// 創(chuàng)建 MasonryInfiniteGrid 實例，并設(shè)置其容器為擁有 ".container" 選擇器的元素，以及設(shè)置間隔為 5px。
const ig = new MasonryInfiniteGrid(".container", {
  gap: 5,
});
// 監(jiān)聽 "requestAppend" 事件，當需要追加新內(nèi)容時觸發(fā)。
ig.on("requestAppend", (e) => {
  // 計算下一個組的鍵值，如果 e.groupKey 是 undefined，則默認為 0，然后加 1。
  const nextGroupKey = (+e.groupKey || 0) + 1;

  // 調(diào)用 append 方法，傳入新生成的項目數(shù)組和組鍵，以追加到網(wǎng)格布局中。
  ig.append(getItems(nextGroupKey, 10), nextGroupKey);
});
// 調(diào)用 renderItems 方法來渲染初始的項目。
ig.renderItems();

實現(xiàn)了一個基本的無限滾動功能，當用戶滾動到頁面底部時，會自動加載更多的項目。getItems 函數(shù)用于生成新的項目，requestAppend 事件監(jiān)聽器用于在需要時追加新項目。ig.renderItems() 用于初始化渲染項目。

總結(jié)

本文介紹了 InfiniteGrid 的基本概念、入門示例、應(yīng)用場景、核心功能。通過簡單的安裝和快速入門指南，可以輕松上手，快速實現(xiàn)無限滾動和動態(tài)布局功能，InfiniteGrid 是構(gòu)建現(xiàn)代網(wǎng)頁布局的理想選擇，值得嘗試和探索。

祝好！

引用鏈接

[1] Github Star: 2.2k: https://github.com/naver/egjs-infinitegrid
[2] 官網(wǎng): https://naver.github.io/egjs-infinitegrid/?ref=ivensliaoblog.com