https://github.com/psolbach/ordnung

The 1kb alternative to Isotope
https://github.com/psolbach/ordnung

isotope layout-engine layouts masonry

Last synced: about 1 month ago
JSON representation

The 1kb alternative to Isotope

• Host: GitHub
• URL: https://github.com/psolbach/ordnung
• Owner: psolbach
• License: other
• Created: 2015-10-28T13:04:45.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2016-01-07T12:43:58.000Z (almost 9 years ago)
• Last Synced: 2024-11-03T16:04:45.977Z (about 2 months ago)
• Topics: isotope, layout-engine, layouts, masonry
• Language: JavaScript
• Homepage:
• Size: 17.6 KB
• Stars: 78
• Watchers: 2
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://raw.githubusercontent.com/psolbach/ordnung/master/ordnung.js) un-minified, or

+ [ordnung.min.js](https://raw.githubusercontent.com/psolbach/ordnung/master/ordnung.min.js) minified

## Usage

_JS_

``` js

var container = document.querySelector('.container');

var ordnung = new Ordnung(container);

ordnung.layout();

```

_HTML_

``` html



  


  


  


  ...



```


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](http://caniuse.com/#feat=transforms2d) 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](https://opensource.org/licenses/MIT).    

You may use this library at will – if you mention the author.

## Credits

Inspired by Isotope by [Metafizzy](http://metafizzy.co)    

Made by [Paul Solbach](http://twitter.com/___paul)