Magnet

Options

All options are optional. Some options overwrite default value.

Setup

itemSelector

Type: String

Select elements to be used as items in the layout. Recommended to always set up, to exclude elements that are not part of the layout. By default, all children elements are selected.

$('.grid').magnet({
  itemSelector: '.grid-item'
});

resize

Type: Boolean Default: true

Enables items to adjust size and position on window resize.

$('.grid').magnet({
  resize: true
});

resizeContainer

Type: Boolean Default: true

Enables item container to resize.

$('.grid').magnet({
  resizeContainer: true
});

initLayout

Type: Boolean Default: true

Enables layout on initialization. Set initLayout: false to disable layout on initialization to use methods or add events.

$('.grid').magnet({
  initLayout: true
});

layoutInstant

Type: Boolean

Disables transitions. Set layoutInstant: false to enable transitions on initialization. Transitions on initialization are disabled by default, but enabled after first layout.

$('.grid').magnet({
  layoutInstant: false
});

itemStyle

Type: Object Default: { position: 'absolute' }

Style applied to items.

$('.grid').magnet({
  itemStyle: { position: 'absolute' }
});

containerStyle

Type: Object Default: { position: 'relative' }

Style applied to item container.

$('.grid').magnet({
  containerStyle: { position: 'relative' }
});

Layout

layoutMode

Type: String Default: 'grid' Value: 'grid', 'rows', 'columns', 'horizontal', 'vertical'

Sets the layout mode to position items.

$('.grid').magnet({
  layoutMode: 'grid'
});

horizontal

Type: Boolean

Lays out items vertically instead of horizontally. Only for layoutMode: 'grid'.

$('.grid').magnet({
  horizontal: true
});

Filtering

filter

Type: String or Function

Shows items that match the filter and hides items that don’t.

$('.grid').magnet({
  filter: '*'
});

Sorting

sortData

Type: Object

Gets data from the HTML. Object’s keys, are used as keywords to sort by. Object’s values, are a string or a function to retrieve data.

$('.grid').magnet({
  sortData: {
    category: '[data-category]',
    symbol: '.symbol'
  }
});

sortBy

Type: String or Array

Sorts items according to a property value. Value must match a key name in sortData.

$('.grid').magnet({
  sortBy: ['category', 'symbol']
});

sortAscending

Type: Boolean Default: true

Sorts items ascending. Set sortAscending: false to sort descending.

$('.grid').magnet({
  sortAscending: true
});

Transitions

duration

Type: Number Default: 500

Items transition duration, in milliseconds.

$('.grid').magnet({
  duration: 500
});

easing

Type: String Default: 'ease'

Items transition effect speed curve.

$('.grid').magnet({
  easing: 'linear'
});

stagger

Type: Number Default: 0

Staggers items transitions, incrementally after one another.

$('.grid').magnet({
  stagger: 0
});

hiddenStyle

Type: Object Default: { opacity: 0, transform: 'scale(0.001)' }

Style applied to hide items.

$('.grid').magnet({
  hiddenStyle: { 
    opacity: 0,
    transform: 'scale(0.001)'
  }
});

visibleStyle

Type: Object Default: { opacity: 1, transform: 'scale(1)' }

Style applied to reveal hidden items.

$('.grid').magnet({
  visibleStyle: { 
    opacity: 1,
    transform: 'scale(1)'
  }
});