stackgrid.adem.js – Simple plugin to help you create a dynamic cascading grid

Advertisement

stackgrid.adem.js is a very fast and simple javascript plugin to help you create a dynamic cascading grid created by heyadem

stackgrid

Getting started

First, include stackgrid.adem.js in your project.

<!-- Example HTML -->
<div id="grid-container">
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
</div>

<!-- Scripts -->
<script src="js/stackgrid.adem.js"></script>

Minimum CSS requirements

#grid-container {
  position: relative;
}

.grid-item {
  position: absolute;
}

.grid-item img {
  width: 100%;
}

Make sure all the contents inside are fully loaded before initializing stackgrid. This is to make sure stackgrid calculates the right height before plotting.

Demo    Stackgrid