javascript 网格

魔方 (Magic Grid)

A simple, lightweight Javascript library for dynamic grid layouts.

一个简单的轻量级Javascript库，用于动态网格布局。

Creating a dynamic grid layout has never been easier. With Magic Grid, all you have to do is specify a container and listen for changes. A few other configuration options are available for convenience but it's all very simple.

创建动态网格布局从未如此简单。 使用Magic Grid，您所要做的就是指定一个容器并监听更改。 为了方便起见，还提供了其他一些配置选项，但它们都很简单。

入门 (Getting Started)

第1步 (Step 1)

Get Magic Grid via NPM:

通过NPM获取Magic Grid：

npm install magic-grid

Or CDN

或CDN

<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>

第2步(如果使用CDN，请跳过) (Step 2 (skip if using CDN))

Import Magic Grid:

导入魔术网格：

import MagicGrid from "magic-grid"

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

You can also pull Magic Grid directly into your html

您也可以将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>

第三步 (Step 3)

You're good to go! If you used a script tag, the library can be referenced via the global variable, MagicGrid.

你很好！ 如果使用脚本标签，则可以通过全局变量MagicGrid引用该库。

let magicGrid = new MagicGrid(...);

magicGrid.listen();

用法 (Usage)

静态内容： (Static content:)

If your container doesn't have any dynamically loaded content i.e., all its child elements are always in the DOM, you should initialize the grid this way:

如果您的容器没有任何动态加载的内容，即其所有子元素始终位于DOM中，则您应采用以下方式初始化网格：

let magicGrid = new MagicGrid({
  container: "#container", // Required. Can be a class, id, or an HTMLElement.
  static: true, // Required for static content.
  animate: true, // Optional.
});

magicGrid.listen();

动态内容： (Dynamic content:)

If the container relies on data from an api, or experiences a delay, for whatever reason, before it can render its content in the DOM, you need to let the grid know the number of items to expect:

如果容器依赖api中的数据，或由于某种原因而经历延迟，则容器可以在DOM中呈现其内容之前，您需要让网格知道预期的项目数：

let magicGrid = new MagicGrid({
  container: "#container", // Required. Can be a class, id, or an HTMLElement.
  items: 20, // For a grid with 20 items. Required for dynamic content.
  animate: true, // Optional.
});

magicGrid.listen();

API (API)

MagicGrid(配置) (MagicGrid(config))

config (required): Configuration object

config(必需)：配置对象

The MagicGrid constructor. Initializes the grid with a configuration object.

MagicGrid构造函数。 使用配置对象初始化网格。

let magicGrid = new MagicGrid({
  container: "#container", // Required. Can be a class, id, or an HTMLElement
  static: false, // Required for static content. Default: false.
  items: 30, // Required for dynamic content. Initial number of items in the container.
  gutter: 30, // Optional. Space between items. Default: 25(px).
  maxColumns: 5, // Maximum number of columns. Default: Infinite.
  useMin: true, // Prioritize shorter columns when placing items in the grid. Default: false.
  animate: true, // Animate item positioning. Default: false.
});

---

---

。听() (.listen())

Positions the items and listens for changes to the window size. All items are repositioned whenever the window is resized.

放置项目并侦听窗口大小的更改。 调整窗口大小时，所有项目都将重新放置。

let magicGrid = new MagicGrid({
  container: "#container", // Required. Can be a class, id, or an HTMLElement
  static: true, // Required for static content.
  animate: true, // Optional.
});

magicGrid.listen();

---

---

.positionItems() (.positionItems())

This function is useful in cases where you have to manually trigger a repositioning; for instance, if a new element is added to the container.

在必须手动触发重新定位的情况下，此功能很有用。 例如，如果将新元素添加到容器中。

let magicGrid = new MagicGrid({
  container: "#container", // Required. Can be a class, id, or an HTMLElement
  items: 30, // Required for dynamic content.
  animate: true, // Optional
});

magicGrid.listen();

// get data from api
// append new element to DOM

// reposition items
magicGrid.positionItems();

翻译自: https://vuejsexamples.com/a-lightweight-javascript-library-for-dynamic-grid-layouts/

javascript 网格