Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fergaldoyle/image-masonry

A responsive justified image layout grid
https://github.com/fergaldoyle/image-masonry

Last synced: 17 days ago
JSON representation

A responsive justified image layout grid

Awesome Lists containing this project

README

        

# image-masonry

A responsive justified image layout grid which maintains image aspect ratios with no trailing or incomplete last row. Best possible layout found by creating a graph of all possible row combinations and finding the shortest path through the graph using a target row height as the basis for weight / cost of each graph node.

---

### Examples
* Vue: [Basic](https://fergaldoyle.github.io/image-masonry/vue-basic.html) - [Advanced](https://fergaldoyle.github.io/image-masonry/vue-advanced.html)
* React: [Basic](https://fergaldoyle.github.io/image-masonry/react-basic.html) - [Advanced](https://fergaldoyle.github.io/image-masonry/react-advanced.html)
* Angular: [Basic](https://fergaldoyle.github.io/image-masonry/angular.html#/basic) - [Advanced](https://fergaldoyle.github.io/image-masonry/angular.html#/advanced)
* Svelte: [Basic](https://fergaldoyle.github.io/image-masonry/svelte-basic.html) - [Advanced](https://fergaldoyle.github.io/image-masonry/svelte-advanced.html)
* LitElement: [Basic](https://fergaldoyle.github.io/image-masonry/litelement-basic.html) - [Advanced](https://fergaldoyle.github.io/image-masonry/litelement-advanced.html)

---

### Screenshot
![alt text](https://raw.githubusercontent.com/fergaldoyle/image-masonry/master/docs/masonry.jpg "Image masonry")