Ordnung.js

The 1kb alternative to Isotope.
Does grid column layouts in a jiffy, no globals asked.

Demo

Example

Install

npm install ordnung-js

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, please consult Can I Use for specifics. As we're not implementing a bin packing algorithm, Ordnung only works with equal-width columns, just like many use cases with the original Isotope.

Performance

Plenty fast, albeit at the cost of being a one-trick pony.
Align 1000 elements x 100 runs ➝ median, on an Intel i7-3720QM.

| Browser | Ordnung ops/sec | Other ops/sec | | ------------------ |:--------------------:|:--------------------:| | Chrome 46 | 32.26 | 10.64 | | Firefox 41 | 19.23 | 0.39 | | Safari 8 | 29.41 | 8.85 |

License

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

Credits

Inspired by Isotope by Metafizzy
Made by Paul Solbach