stack-up

Create fixed width, variable height grid layouts

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>

<!-- Scripts -->
<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 stackup.
  stackup.initialize();

};

Config

Customize stack-up to your needs.

stackup.setConfig({
  columnWidth        : 320,
  gutter             : 18,
  isFluid            : false,
  layout             : "ordinal", // ordinal, optimized
  numberOfColumns    : 3,
  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 required to continue operation.
  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 required to continue operation.
  callback();
};

Reset and restack

Once the grid is initialized; you will need to call the restack method if you change any of the configurations.


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

The restack method will not work properly if you change something that affect the dimensions of the grid item. You will have to use reset instead. (This recalculates 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 re-calculating everything.

// Get container element.
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);

There is currently no prepend method.

That’s it!

License

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

Copyright © 2016 Andrew Prasetya

Related Repositories

scotch-box

scotch-box

Scotch Box is a preconfigured Vagrant Box with a full array of LAMP Stack features to get you up and running with Vagrant in no time. ...

ansible-django-stack

ansible-django-stack

Ansible Playbook for setting up a Django app with Nginx, Gunicorn, PostgreSQL, Celery, RabbitMQ, Supervisor, Virtualenv, and Memcached. A Vagrantfile for provisioning a VirtualBox virtual machine is included as well. ...

ansible-rails

ansible-rails

A collection of playbooks for getting your rails stack up and running fast! ...

stack-up

stack-up

Create fixed width, variable height grid layouts ...

rails-fed-chef

rails-fed-chef

Chef kitchen for setting up servers for use with a rails stack ...