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





Isotope

By Chelsea Lura

Isotope

Slide deck used for a lightening-talk I gave on Isotope.

  • 3,060