Isotope

Filter & sort magical layouts

slides.com/chelsealura/isotope

Masonry

Masonry is a JavaScript grid layout library.

It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

Brief Background

V.1 released by Metafizzy
creator David DeSandro in 2011
as a jQuery plug-in.

V.2 released March 2014

jQuery is no longer a depedency
AMD RequireJS support
Responsive web design with element sizing options

Layouts

Masonry
FitRows
CellsByRow
Vertical
MasonryHorizantal
FitColumns
CellsByColumn
Horizantal

Layout configuration

var $container = $('#container').isotope({
  // main isotope options
  itemSelector: '.item',
  layoutMode: 'cellsByRow',
  // options for cellsByRow layout mode
  cellsByRow: {
    columnWidth: 200,
    rowHeight: 150
  },

Easy to Program in Javascript

Code Pen Example

Code Pen Example

Stamp Off Stamp On

Cool Functions and Methods:

Appended
Isotope.data/ .data('isotope')
Prepended
Remove
bindResize
Arrange
getItemElements

have fun

building and sorting

beautiful layouts

Isotope's website

Isotope's Github

Full list of all Isotope Code Pen examples