masonry is the default layout mode. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. masonry uses the same code from the Masonry library.

Masonry js Examples

HTML:

<div class="grid">
  <!-- .grid-sizer empty element, only used for element sizing -->
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>

CSS:

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns wide */
.grid-item--width2 { width: 40%; }

JS:

$('.grid').isotope({
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    // use outer width of grid-sizer for columnWidth
    columnWidth: '.grid-sizer'
  }
})

Source With More Masonry js Examples : Link 1, Link2, Link3

About The Author

Related Posts

Leave a Reply

Your email address will not be published.