Minimal Masonry Like Layout Plugin With jQuery - Stratum.js

Stratum.js is a really small jQuery plugin to create a configurable, fluid, cascading grid layout inspired by Masonry and Pinterest.com.

Heavily based on CSS3 Flexible Box Module and compatible with most CSS frameworks such as Bootstrap 4.

How to use it:

1. Create a set of grid items on the webpage as follows:

<div data-grid>
  
  <div class="card">
    Grid Item 1
  </div>

  <div class="card">
    Grid Item 2
  </div>

  <div class="card">
    Grid Item 3
  </div>

  <div class="card">
    Grid Item 4
  </div>

  <div class="card">
    Grid Item 5
  </div>

  ...

</div>

2. Insert the compiled and minified version of the jQuery Stratum.js after jQuery library (slim build is recommended).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="stratum.min.js"></script>

3. Initialize the grid and specify the number of columns you want to use (Default: 3).

$(function(){

  $('[data-grid]').stratum({
    columns: 2
  });

});

4. Specify the space between grid items (Default: 15px).

$(function(){

  $('[data-grid]').stratum({
    columns: 2,
    padding: 5
  });

});

Changelog:

v1.0.3 (2018-09-07)

• Fixed bug with padding gap.

v1.0.2 (2018-08-22)

• Added sliding effect for grid elems. 

v1.0.1 (2018-07-24)

• Added new examples and modified stratum.js. 

v1.0.0 stable (2018-07-05)

• Rewrite init function. Added resize methods. 

2018-07-04

• Added smart system.

2018-07-01

• Added setGridHeight function.

---

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