The 1kb alternative to Isotope.
Does grid column layouts in a jiffy, no globals asked.
npm install ordnung-js
- ordnung.js un-minified, or
- ordnung.min.js minified
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.
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.
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 |
Ordnung.js is licensed under MIT.
You may use this library at will – if you mention the author.
Inspired by Isotope by Metafizzy
Made by Paul Solbach