Awesome Open Source
Awesome Open Source

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

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,686
masonry (27
layout-engine (23
layouts (16

Find Open Source By Browsing 7,000 Topics Across 59 Categories