网格助手三个js - Javascript

网格助手三个js是三个能够帮助前端开发者实现网格布局的Javascript库，分别是：

• Grid.js：一个轻量级的网格布局系统，支持Flexbox和CSS网格布局。
• Muuri.js：一个可扩展的、跨浏览器的、零依赖的网格布局系统。
• Packery.js：一个可漂亮地排列各种元素的网格布局系统。

这三个Javascript库都提供了易于使用的API，可以帮助我们轻松地创建可定制的网格布局。下面就让我们逐一来介绍它们的特点和用法。

Grid.js

安装和用法

要使用Grid.js，我们可以通过npm来安装：

npm install gridjs

接着，在HTML中引入Grid.js：

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

然后，在Javascript中创建一个网格布局：

var grid = new Grid({
  container: '.grid',
  items: '.grid-item',
  gutter: 20
});

特点

Grid.js支持以下特点：

• 支持Flexbox和CSS网格布局
• 自适应布局
• 可以在不同分辨率下使用不同的布局
• 可以使用经典的12列布局
• 可以使用rem作为长度单位
• 可以定义CSS变量以便在不同CSS规则下使用不同变量

Muuri.js

安装和用法

我们可以通过npm来安装Muuri.js：

npm install muuri

然后，我们可以在HTML中引入Muuri.js的CSS和Javascript：

<link rel="stylesheet" href="path/to/muuri.css" />
<script src="path/to/muuri.js"></script>

接着，在Javascript里初始化Muuri布局：

var grid = new Muuri('.grid', {
  dragEnabled: true,
  layout: {
    rounding: false
  }
});

特点

Muuri.js支持以下特点：

• 可扩展
• 零依赖
• 跨浏览器
• 可以使用拖拽方式进行布局操作
• 支持响应式设计
• 可以使用CSS3动画进行布局效果的优化

Packery.js

安装和用法

我们可以通过npm来安装Packery.js：

npm install packery --save

然后，我们可以在HTML中引入Packery.js和CSS：

<link rel="stylesheet" href="path/to/packery.css" />
<script src="path/to/packery.js"></script>

接着，在Javascript里初始化Packery布局：

var container = document.querySelector('.grid');
var packery = new Packery(container, {
  itemSelector: '.grid-item',
  gutter: 10,
  percentPosition: true
});

特点

Packery.js支持以下特点：

• 可以使用浏览器原生的CSS网格布局
• 可以使用可拖拽元素进行布局操作
• 支持自适应设计
• 可以使用贴合网格布局进行对齐操作
• 可以使用一些默认的样式来优化布局效果

结论

网格助手三个js都提供了易于使用的API，可以帮助我们轻松地创建可定制的网格布局。具体使用哪一个，还是要看我们的实际需求，选择最佳的网格布局系统。