### Install Macy.js with npm

Source: https://github.com/bigbite/macy.js/blob/master/README.md

Installs the Macy.js library using the Node Package Manager, making it available for use in your project.

```bash
npm install macy
```

--------------------------------

### Install Macy.js with Bower

Source: https://github.com/bigbite/macy.js/blob/master/README.md

Installs the Macy.js library using the Bower package manager, a web package manager for front-end dependencies.

```bash
bower install macy
```

--------------------------------

### Include Macy.js via jsDelivr CDN

Source: https://github.com/bigbite/macy.js/blob/master/README.md

Includes the Macy.js library directly in an HTML page using the jsDelivr Content Delivery Network, providing a quick way to get started without local installation.

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

--------------------------------

### Configure Macy.js breakAt with columns and margin

Source: https://github.com/bigbite/macy.js/blob/master/README.md

Example of setting the `breakAt` option to define responsive column counts and margins based on viewport width. This allows for dynamic layout adjustments across different screen sizes.

```javascript
{
  breakAt: {
    760: {
      margin: {
        x: 20,
        y: 10,
      },
      columns: 4
    }
  }
}
```

--------------------------------

### Configure Macy.js margin with object

Source: https://github.com/bigbite/macy.js/blob/master/README.md

Example of setting the `margin` option as an object to define separate horizontal (`x`) and vertical (`y`) margins between columns. This provides more granular control over spacing.

```javascript
margin: {
  x: 10,
  y: 16  
}
```

--------------------------------

### Configure Macy.js breakAt with columns and x-margin only

Source: https://github.com/bigbite/macy.js/blob/master/README.md

Example of setting the `breakAt` option to define responsive column counts and only the horizontal (`x`) margin based on viewport width. The vertical margin will retain its previously declared value.

```javascript
{
  breakAt: {
    760: {
      margin: {
        x: 20,
      },
      columns: 4
    }
  }
}
```

--------------------------------

### Initialize Macy.js instance

Source: https://github.com/bigbite/macy.js/blob/master/README.md

Demonstrates the basic initialization of Macy.js, creating a new instance. Further configuration can be passed as an object to the `Macy()` constructor.

```javascript
var macyInstance = Macy({
  // See below for all available options.
});
```

--------------------------------

### Macy.js Configuration Options API

Source: https://github.com/bigbite/macy.js/blob/master/README.md

Detailed documentation for all available configuration options when initializing a Macy.js instance, including their default values, types, and behavior. These options allow fine-tuning of the layout, responsiveness, and image loading.

```APIDOC
container:
  Default: None
  Description: Target container element for Macy. All direct children become sortable items.
columns:
  Default: 4
  Description: Defines the default number of columns. Can be overridden by 'breakAt'.
trueOrder:
  Default: false
  Description: If false, prioritizes equalizing column height over item order.
margin:
  Default: 0
  Description: Adjusts margin between columns in pixels. Can be an object {x: number, y: number}. X can be percentage/other units (v2.4+). Y must be integer.
waitForImages:
  Default: false
  Description: If true, Macy waits for all images to load before running. If false, runs on each image load.
useOwnImageLoader:
  Default: false
  Description: Set to true to use a different image loader library.
mobileFirst:
  Default: false
  Description: Alters 'breakAt' behavior to be mobile-first. Default 'columns' applies, then 'breakAt' values apply for viewports >= specified width.
breakAt:
  Default: None
  Description: Object to specify column count changes based on viewport width (e.g., 780: 3 means 3 columns when viewport <= 780px). Supports nested margin changes (v2.1+).
cancelLegacy:
  Default: false
  Description: If enabled, script will not run on browsers without native Promises or polyfill.
useContainerForBreakpoints:
  Default: false
  Description: When enabled, breakpoint options are based on the container's width instead of the document's width.
```

--------------------------------

### Macy.js Instance Methods API

Source: https://github.com/bigbite/macy.js/blob/master/README.md

Documentation for methods available on a Macy.js instance, used for initialization and layout recalculation. These methods allow programmatic control over the Macy.js layout.

```APIDOC
Macy:
  Parameters:
    args:
      Type: Object
      Required: true
      Description: An object of configuration properties. 'container' is the only required property, specifying the selector for the element containing sortable items.
  Description: The initializing function to create a new Macy.js instance.
recalculate:
  Parameters:
    refresh:
      Type: Boolean
      Optional: true
      Description: Can be null.
    loaded:
      Type: Boolean
      Optional: true
      Description: Can be null.
  Description: Recalculates the entire layout, useful after dynamically adding content (e.g., via AJAX).
```

--------------------------------

### Initialize Macy.js with Custom Configuration

Source: https://github.com/bigbite/macy.js/blob/master/demo/index.html

This snippet demonstrates how to initialize a new Macy.js instance with various configuration options. It sets the container element, disables true order and internal image loading, enables debug mode, sets mobile-first behavior, defines initial columns, specifies margins, and configures responsive breakpoints.

```JavaScript
var masonry = new Macy({
  container: '#macy-container',
  trueOrder: false,
  waitForImages: false,
  useOwnImageLoader: false,
  debug: true,
  mobileFirst: true,
  columns: 1,
  margin: {
    y: 16,
    x: '2%'
  },
  breakAt: {
    1200: 6,
    940: 5,
    520: 3,
    400: 2
  }
});
```

--------------------------------

### macyInstance.on API Definition

Source: https://github.com/bigbite/macy.js/blob/master/README.md

API definition for the `on` method, detailing its parameters and their types.

```APIDOC
macyInstance.on(
  eventKey: string,
  callback: Function
)
  eventKey: The key of the event to listen for (e.g., macyInstance.constants.EVENT_IMAGE_COMPLETE).
  callback: The function to execute when the event occurs.
```

--------------------------------

### macyInstance.runOnImageLoad API Definition

Source: https://github.com/bigbite/macy.js/blob/master/README.md

API definition for the `runOnImageLoad` method, detailing its parameters and their types.

```APIDOC
macyInstance.runOnImageLoad(
  callback: Function,
  runEveryTime: Boolean = false
)
  callback: Function to run on image load. Receives an event object.
  runEveryTime: If true, the callback runs every time an image loads. Defaults to false (runs once when all images are loaded).
```

--------------------------------

### macyInstance.reInit API Definition

Source: https://github.com/bigbite/macy.js/blob/master/README.md

API definition for the `reInit` method.

```APIDOC
macyInstance.reInit()
```

--------------------------------

### Macy.js Initialization Method (Macy)

Source: https://github.com/bigbite/macy.js/blob/master/README.md

The primary function to initialize Macy.js, taking an object of configuration properties. The `container` property is the only required one, specifying the selector for the element that contains all the items to be laid out.

```javascript
var macy = Macy({
    container: '#macy-container',
    trueOrder: false,
    waitForImages: false,
    margin: 24,
    columns: 6,
    breakAt: {
        1200: 5,
        940: 3,
        520: 2,
        400: 1
    }
});
```

--------------------------------

### macyInstance.reInit Method

Source: https://github.com/bigbite/macy.js/blob/master/README.md

This method reinitializes the current Macy.js instance, applying its configuration again to the layout.

```javascript
macyInstance.reInit();
```

--------------------------------

### macyInstance.runOnImageLoad Method

Source: https://github.com/bigbite/macy.js/blob/master/README.md

This method allows executing a function when images load or after all images are loaded, ensuring correct layout adjustments, especially with Ajax. It can be configured to run once or on every image load, and the callback receives an event object.

```javascript
macyInstance.runOnImageLoad(function () {
  macyInstance.recalculate(true);
}, true);
```

```javascript
macyInstance.runOnImageLoad(function () {
  console.log('I only get called when all images are loaded');
  macyInstance.recalculate(true, true);
});
```

```javascript
macyInstance.runOnImageLoad(function () {
  console.log('Every time an image loads I get fired');
  macyInstance.recalculate(true);
}, true);
```

```javascript
macyInstance.runOnImageLoad(function (event) {
  if (event.data.img) {
    // note: this parameter can be undefined if it is the final completion event that is emitted.
    console.log(event.data.img);
  }
}, true);
```

--------------------------------

### macyInstance.on Event Listener Method

Source: https://github.com/bigbite/macy.js/blob/master/README.md

This method allows attaching a function to a specific Macy.js event, enabling custom actions when events like image completion occur.

```javascript
macyInstance.on(macyInstance.constants.EVENT_IMAGE_COMPLETE, function (ctx) {
  console.log('all images have loaded');
});
```

--------------------------------

### macyInstance.emit API Definition

Source: https://github.com/bigbite/macy.js/blob/master/README.md

API definition for the `emit` method, which allows manually triggering a custom event within the Macy.js instance.

```APIDOC
macyInstance.emit(
  eventKey: string
)
  eventKey: The key of the event to emit.
```

--------------------------------

### Macy.js Event Constants

Source: https://github.com/bigbite/macy.js/blob/master/README.md

Macy.js provides a set of predefined constants for its event system, ensuring consistent and correct targeting of events. These constants are accessible via `macyInstance.constants`.

```APIDOC
macyInstance.constants:
  EVENT_INITIALIZED: 'macy.initialized' - Event for Macy initialization/reinitialization
  EVENT_RECALCULATED: 'macy.recalculated' - Event for layout recalculation
  EVENT_IMAGE_LOAD: 'macy.images.load' - Event for individual image load
  EVENT_IMAGE_COMPLETE: 'macy.images.complete' - Event for all images complete
  EVENT_RESIZE: 'macy.resize' - Event for document resize
```

--------------------------------

### macyInstance.remove API Definition

Source: https://github.com/bigbite/macy.js/blob/master/README.md

API definition for the `remove` method.

```APIDOC
macyInstance.remove()
```

--------------------------------

### Macy.js Recalculate Method

Source: https://github.com/bigbite/macy.js/blob/master/README.md

Recalculates the entire Macy.js layout. This method is particularly useful if you dynamically add more content to the container (e.g., via AJAX) and need the layout to adjust.

```javascript
macyInstance.recalculate();
```

--------------------------------

### macyInstance.remove Method

Source: https://github.com/bigbite/macy.js/blob/master/README.md

This method removes all styling and event listeners that Macy.js has added to the DOM, effectively cleaning up the instance.

```javascript
macyInstance.remove();
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.