magic Grid

说明文档

A lightweight Javascript library for dynamic grid layoutshttps://vuejsexamples.com/a-lightweight-javascript-library-for-dynamic-grid-layouts/npm

npm install magic-grid

cnd

<script src="https://unpkg.com/magic-grid/dist/magic-grid.cjs.js"></script>

<!-- or (minified) -->
<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>

引入使用

import MagicGrid from "magic-grid"

// or
let MagicGrid = require("magic-grid");

直接html中使用

<script src="node_modules/magic-grid/dist/magic-grid.cjs.js"></script>

<!-- or (minified) -->
<script src="node_modules/magic-grid/dist/magic-grid.min.js"></script>

基本配置

let magicGrid = new MagicGrid({
  // 容器--盒子类名或id
  container: "#container",
  // 开启-容器布局
  static: true, 
  // 过度动画-开启
  animate: true,
});
// 调用监听
magicGrid.listen();

在网格中放置项目时，优先考虑较短的列。

useMin

//可有可无。项目之间间的空间。

gutter

//动态内容所必需的。容器中的初始项目数

items

// 设置最多列

 maxColumns: 3,

 // 内容是否居中

 center: true

定位项目并侦听对窗口大小的更改。每当调整视窗大小时，所有项目都会重新定位

.listen()

.positionItems()

此函数在必须手动触发重新定位的情况下非常有用;例如，在容器中添加新元素时