Submit your widget

Very Cool dynamic cascading grid with jQuery

Created 5 years ago   Views 10874   downloads 1916    Author heyadem
Very Cool dynamic cascading grid with jQuery
View DemoDownload 119.1 KB
Share |

This is a very fast and simple javascript plugin to help you create a dynamic cascading grid.

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>

<!-- 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.

var stackgrid = new Stackgrid;

// Configurate your stackgrid options here.
stackgrid.config.column_width = 240;

// One way to make sure everything is loaded is
// to wrap the initializer inside window onload.
window.onload = function() {

  // The initializer takes in two arguements:
  // the grid container selector, and the grid items selector
  stackgrid.initialize('#grid-container', '.grid-item');


Read more: