欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

• ? Github Star: 2.2k[1]

• ? 官網[2]

InfiniteGrid 是什么？

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

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

核心功能

網格類型

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

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

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

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

PackingInfiniteGrid

框架融合

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

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

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

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

總結

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

祝好！

引用鏈接

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