Minimal Masonry Like Layout Plugin With jQuery - Stratum.js

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.

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
  });
});

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

  • Publication date: 24.06.2018
  • Source