Savvior 开源项目教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00975/article/details/141764701

Savvior 开源项目教程

savviorA Salvattore and Masonry alternative without CSS-driven configuration or absolute CSS positioning项目地址:https://gitcode.com/gh_mirrors/sa/savvior

项目介绍

Savvior 是一个多列布局库，旨在替代 Salvattore 或 Masonry，无需 CSS 驱动的配置或绝对定位。它依赖于 window.matchMedia 和 enquire.js，易于集成且轻量级。Savvior 提供了简单的配置选项，支持广泛的浏览器，并且可以通过自定义事件与布局进行交互。

项目快速启动

安装

首先，通过 npm 或直接下载脚本文件来安装 Savvior：

npm install savvior

或者下载 savvior.min.js 文件并将其包含在你的项目中：

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

初始化

在你的 HTML 文件中添加一个容器元素：

<div id="myGrid">
  <div>Item 1</div>
  <div>Item 2</div>
  <!-- 更多项 -->
</div>

然后，在 JavaScript 中初始化 Savvior：

savvior.init('#myGrid', {
  "screen and (max-width: 20em)": { columns: 2 },
  "screen and (min-width: 20em) and (max-width: 40em)": { columns: 3 },
  "screen and (min-width: 40em)": { columns: 4 }
});

应用案例和最佳实践

响应式布局

Savvior 非常适合用于创建响应式布局。通过配置不同的媒体查询，可以轻松实现不同屏幕尺寸下的多列布局。

动态内容加载

结合 AJAX 技术，可以在内容动态加载后重新绘制布局：

document.addEventListener('DOMContentLoaded', function() {
  savvior.init('#myGrid', {
    "screen and (max-width: 20em)": { columns: 2 },
    "screen and (min-width: 20em) and (max-width: 40em)": { columns: 3 },
    "screen and (min-width: 40em)": { columns: 4 }
  });

  // 假设通过 AJAX 加载更多内容
  fetch('path/to/more/items')
    .then(response => response.text())
    .then(html => {
      document.getElementById('myGrid').innerHTML += html;
      savvior.redraw('#myGrid');
    });
});