stack-up.js

A simple and fast JavaScript plugin to help you create fixed-width, variable-height grid layout.

Getting started

First, include stack-up.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>

<!-- JavaScript -->
<script src="js/stack-up.js"></script>

Minimum CSS requirements

#grid-container {
  position: relative;
}

.grid-item {
  position: absolute;
}

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

Make sure all content inside the container are loaded before initializing stack-up. This is to make sure stack-up calculates the right height before plotting.

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

  // Create a stackup object.
  var stackup = new StackUp({
    containerSelector: '#grid-container',
    itemsSelector: '#grid-container > .grid-item',
    columnWidth: 240,
  });
  // Initialize once you are done configurating.
  stackup.initialize();

};

Config

Here are the default config values.

stackup.config.columnWidth = 320;
stackup.config.gutter = 18;
stackup.config.isFluid = false;

// Currently there are two layout options: "ordinal", and "optimized"
stackup.config.layout = "ordinal";
stackup.config.numberOfColumns = 3;
stackup.config.resizeDebounceDelay = 350;

// This function allows you to modify how each item is moved or animated.
stackup.config.moveItem: function(item, left, top, callback) {
  item.style.left = left + "px";
  item.style.top = top + "px";
  // The callback function is important!
  callback();
};

// This one allows you to modify how the container scales.
stackup.config.scaleContainer: function(container, width, height, callback) {
  container.style.width = width + "px";
  container.style.height = height + "px";
  // The callback function is important!
  callback();
};

Reset and re-stack

If you change any of the configurations after the grid is initialized, you will have to call the restack method.

stackup.config.layout = 'optimized';
stackup.restack();

Re-stack will not work properly if you change something that affect the dimensions of the grid item. You will have to use reset instead. (This re-calculates the grid stacking from top to bottom.)

stackup.config.columnWidth = 220;
stackup.reset();

You will also need to use the reset method if you add or remove any grid item.

Append

The append method allows you to add a new grid item without calculating the whole grid. This saves computation time!

// Get container.
var gridContainer = document.getElementById("grid-container");

// Create a new grid item element.
var gridItem = document.createElement("div");
gridItem.setAttribute("class", "grid-item");
gridItem.innerHTML = "blah blah";

// Append the new grid item element into container element.
gridContainer.appendChild(gridItem);

// Append it to stackup.
stackup.append(gridItem);

That's it!

License

StackUp is licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (C) 2016 Andrew Prasetya