Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fergaldoyle/image-masonry
A responsive justified image layout grid
https://github.com/fergaldoyle/image-masonry
Last synced: 3 months ago
JSON representation
A responsive justified image layout grid
- Host: GitHub
- URL: https://github.com/fergaldoyle/image-masonry
- Owner: fergaldoyle
- License: mit
- Created: 2019-09-06T19:48:45.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T09:28:33.000Z (over 1 year ago)
- Last Synced: 2023-08-24T23:34:39.857Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 13.2 MB
- Stars: 12
- Watchers: 2
- Forks: 3
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-stars - fergaldoyle/image-masonry - A responsive justified image layout grid (JavaScript)
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
