https://github.com/zaeval/dynamic-grid-layout
https://github.com/zaeval/dynamic-grid-layout
grid-layout image javascript-library
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/zaeval/dynamic-grid-layout
- Owner: zaeval
- License: mit
- Created: 2017-10-07T05:11:53.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-06-07T06:11:49.000Z (about 4 years ago)
- Last Synced: 2025-07-05T15:10:47.489Z (12 months ago)
- Topics: grid-layout, image, javascript-library
- Language: JavaScript
- Size: 2.43 MB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# dynamic-image-grid-layout
* digl.js
* digl.css
* demo.css
* 01.jpeg
* 02.jpeg
* 03.jpeg
* 04.jpeg
* 05.jpeg
* 06.jpeg
# structure
```
wrapper
│
└───containner
│
└───obj1
│ │
│ │ span
│ └───img
│
└───obj2
│ │
│ │ span
│ └───img
│
└───obj3
│ │
│ │ span
│ └───img
└───...
```
# How 2 use
1. insert this code ** tag** in **head tag**
```html
<head>
...
<script src="https://raw.githubusercontent.com/zaeval/dynamic-image-grid-layout/master/static/js/digl.js">
...
```
2. insert like this code bottom of **body tag**
```html
var args = {
containSize: "444px",
objSize: "200px",
containObjId: "digl",
wrapperObjId: "digl_wrapper",
gap: "5px",
};
var digl = new Digl(args);
digl.pushObjs(['static/img/01.jpg', 'static/img/02.jpg', 'static/img/03.jpg', 'static/img/04.jpg', 'static/img/05.jpg', 'static/img/06.jpg']);
```
## explain of args
```
**containSize : wrapper&containner object size (width, height is same)**
**objSize : object size (height is depedency of width. this argument is width)**
```
>default value : '433px' & '200px'
```
containObjId : containner object id
wrapperObjId : wrapper object id
```
>default value : 'digl' & 'digl_wrapper'
```
gap : column & row gap
```
>default value : (contain_width - scroll_width - column * object_width) / gap_num
# 2022-06-07
In css masonry layout supported. so this repository is not helpful.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout