NPM 包 Savvior 使用教程

介绍

Savvior 是一个帮助实现网格式（grid-based）布局的 npm 包。它能够快速而方便地将元素网格化，并且支持多种配置选项。

在这篇文章中，我们将学习如何使用 Savvior 来创建网格布局，并深入了解它的一些高级配置选项。

安装

首先，我们需要安装 Savvior。打开命令行界面（terminal），并输入以下命令：

npm install savvior

基本用法

使用 Savvior 创建网格是非常简单的。首先，在你的 HTML 文件中引入 Savvior：

<script src="path/to/savvior.js"></script>

然后，在你想要应用网格布局的元素上添加一个 data-savvior-grid 属性：

<div data-savvior-grid>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

这将使得 Savvior 自动将它们分配到一个网格中。

高级选项

列宽

默认情况下，Savvior 将元素均匀地分配到每个列中。但是，你可以通过将 data-savvior-grid-* 属性添加到父元素上来自定义每列的宽度。以下是一个例子：

<div data-savvior-grid data-savvior-grid-cols="2 2 1">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

这个例子将会生成三列，第一列和第二列有相同的宽度，第三列的宽度则是第一列或第二列的一半。

预加载

当页面中包含大量图片时，Savvior 可以自动预加载所有图片，以避免在加载页面时出现空白或闪烁的情况。要启用此功能，请将 data-savvior-preload 属性添加到父元素上：

<div data-savvior-grid data-savvior-preload>
  <div><img src="path/to/image1.jpg"></div>
  <div><img src="path/to/image2.jpg"></div>
  <div><img src="path/to/image3.jpg"></div>
  <div><img src="path/to/image4.jpg"></div>
  <div><img src="path/to/image5.jpg"></div>
  <div><img src="path/to/image6.jpg"></div>
</div>

懒加载

除了预加载图片外，Savvior 还支持懒加载。如果你希望在用户滚动到页面的特定部分时才加载图片，可以将 data-savvior-lazyload 属性添加到父元素上：

<div data-savvior-grid data-savvior-lazyload>
  <div><img src="path/to/image1.jpg"></div>
  <div><img src="path/to/image2.jpg"></div>
  <div><img src="path/to/image3.jpg"></div>
  <div><img src="path/to/image4.jpg"></div>
  <div><img src="path/to/image5.jpg"></div>
  <div><img src="path/to/image6.jpg"></div>
</div>

这将会延迟所有图片的加载，直到它们出现在视野内。

结论

Savvior 是一个功能强大而灵活的 npm 包，使得网格布局的创建变得非常简单和

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