Ordnung.js

The 1kb alternative to Isotope.

Demo

Example

Install

Download

• ordnung.js un-minified, or
• ordnung.min.js minified

Usage

JS

var container = document.querySelector('.container');
var ordnung = new Ordnung(container);

ordnung.layout();

HTML

<div class="container">
  <div class="elem"></div>
  <div class="elem"></div>
  <div class="elem"></div>
  ...
</div>

Elements should be of equal width but variable height and float: left.
After layout, the container height will be adjusted to the condensed height of the elements.

CSS

To use Ordnung with media-queries, you need to use a hack for now: Clear the styles on window.resize and call ordnung.layout(). See example.

Compatibility

Ordnung.js uses CSS-transforms to move stuff around. This is a widely supported property, pleaase refer to Can I Use for specifics. As we're not implementing a bin packing algorithm, Ordnung only works with fixed-width columns, just like the original Isotope.

License

Ordnung.js is licensed under GPL 3.
You may use this library at will – if you mention the author.

Credits

Inspired by Isotope by Metafizzy
Made by Paul Solbach