Tiny Masonry Grid Layout Plugin In JavaScript - Colcade.js

Colcade.js is the minimal version of the famous Masonry plugin that helps developers generate responsive, fluid, blazing fast grid layout in jQuery or Vanilla JavaScript.

How to use it:

1. Insert columns and items to the grid layout as follows:

<div class="grid">
  <div class="grid-col grid-col--1"></div>
  <div class="grid-col grid-col--2"></div>
  <div class="grid-col grid-col--3"></div>
  <div class="grid-col grid-col--4"></div>

  <div class="grid-item grid-item--a"></div>
  <div class="grid-item grid-item--b"></div>
  <div class="grid-item grid-item--c"></div>
  <div class="grid-item grid-item--d"></div>
  ...
</div>

2. Download and insert the Colcade.js library into the document. jQuery is optional.

<!-- <script src="jquery.min.js"></script> -->
<script src="./colcade.js"></script>

3. Code the CSS to size the grid columns.

.grid:after {
  display: block;
  content: '';
  clear: both;
}

.grid-col {
  float: left;
  width: 49%;
  margin-right: 2%;
  background: #DDD;
}

.grid-col--4 { margin-right: 0; }

/* hide two middle */
.grid-col--2, .grid-col--3 { display: none; }

@media ( min-width: 768px ) {
  .grid-col { width: 32%; }
  .grid-col--2 { display: block; }
}

@media ( min-width: 1200px ) {
  .grid-col { width: 23.5%; }
  .grid-col--2, .grid-col--3 { display: block; }
}

/* or using CSS flexbox */
.grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.grid-col {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.grid-col--2, .grid-col--3 { display: none }

@media ( min-width: 768px ) {
  .grid-col--2 { display: block; } 
}

@media ( min-width: 1200px ) {
  .grid-col--3 { display: block; } 
}

4. Initialize the Colcade.js plugin and done.

// jQuery
$('.grid').colcade({
  columns: '.grid-col',
  items: '.grid-item'
})

// Vanilla JavaScript
var instance = new Colcade( '.grid', {
    columns: '.grid-col',
    items: '.grid-item'
});

5. You can also initialize the Colcade.js via HTML data attribute. Without any JS call.

<div class="grid" data-colcade="columns: .grid-col, items: .grid-item">
  ...
</div>

6. Possible API methods to create a dynamic Masonry layout. E.g. infinite scroll.

/* Add new items to the grid */
// jQuery
$grid.colcade( 'append', items );
// vanilla JS
instance.append( items );

/* Prepend items to the grid */
// jQuery
$grid.colcade( 'prepend', items );
// vanilla JS
instance.prepend( items );

/* Destroy the grid layout */
// jQuery
$grid.colcade( 'destroy' );
// vanilla JS
instance.destroy();

---

This awesome jQuery plugin is developed by desandro. For more Advanced Usages, please check the demo page or visit the official website.