Macy.js - 垂直布局的神器

Macy.js - 垂直布局的神器

macy.js项目地址:https://gitcode.com/gh_mirrors/ma/macy.js

Macy.js 是一个轻量级的，无依赖的JavaScript库，其目标是通过寻找最小高度的最佳布局，将元素垂直地分栏排序。这个小巧而强大的工具让你的网页在不同屏幕尺寸下都能保持整洁美观。

安装

你可以通过npm或Bower进行安装，或者直接通过jsDelivr CDN引入：

npm:

npm install macy

Bower:

bower install macy

CDN引用：

<script src="https://cdn.jsdelivr.net/npm/macy@2"></script>

使用方法

只需简单调用Macy函数并配置选项：

var macyInstance = Macy({
  // 在这里配置你的选项
});

选项

Macy提供了多种定制化选项以适应不同的需求：

• container：默认未设置，用于指定要应用Macy的容器元素，其所有直接子元素将被作为可排序项。
• columns：默认为4，定义默认的列数，可以使用breakAt选项来设定响应式断点。
• trueOrder：默认为false，当设为false时，会优先平衡每列的高度而非保留原始顺序。
• margin：默认为0，可以调整列之间的像素间距；从v2.1版本开始，你还可以设定x和y方向上的独立值，甚至可以用百分比单位。
• waitForImages：默认为false，设为true则会在页面所有图片加载完成后再运行Macy。
• useOwnImageLoader：默认为false，如果你想使用自定义的图像加载器，可设为true。
• mobileFirst：默认为false，设为true启用移动优先模式，改变断点行为。
• breakAt：用于根据视口宽度更改列数的断点对象。例如，780: 3表示当视口宽小于等于780px时，列数为3。
• cancelLegacy：默认为false，如果设为true，将在不支持Promise的浏览器中取消运行。
• useContainerForBreakpoints：默认为false，若设为true，断点基于容器元素而不是文档宽度。

方法

除了初始化之外，Macy还提供了一些实用的方法：

• recalculate()：重新计算整个布局，当有新的内容插入时非常有用。
• runOnImageLoad()：在图片加载时运行回调，可用于动态内容加载后的布局更新。
• remove()：移除由Macy添加的所有样式和事件监听器。
• reInit()：重新初始化当前的Macy实例。
• on() 和 emit()：事件绑定与触发，可用于构建自定义的事件处理。

应用场景

Macy.js适用于任何需要响应式网格布局的地方，如产品展示、照片墙、卡片式设计等。它可以轻松处理图片加载，确保即使图片加载时间较长，也能呈现出漂亮的布局效果。

特点

• 轻量化：没有额外的依赖，只关注核心功能。
• 灵活的配置：多样化的选项允许你按需定制，包括列数、断点、图像加载策略等。
• 性能优化：能够等待图片加载完成再执行布局，避免因图片延迟加载导致的布局问题。
• 兼容性：全面支持主流浏览器，尽管IE11及以上版本需要Promise polyfill。

总的来说，Macy.js是一个强大且易用的工具，能帮助你打造优雅的响应式布局。立即尝试，并让网页呈现更佳视觉效果！

macy.js项目地址:https://gitcode.com/gh_mirrors/ma/macy.js