masonry-simple 1.0.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -4
- package/dist/index.js +3 -22
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +3 -22
- package/dist/index.module.js.map +1 -1
- package/package.json +1 -1
- package/src/images/960_1000.jpg +0 -0
- package/src/images/960_1360.jpg +0 -0
- package/src/images/960_640.jpg +0 -0
- package/src/index.js +2 -24
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
[](https://github.com/ux-ui-pro/masonry-simple)
|
|
8
8
|
[](https://www.npmjs.org/package/masonry-simple)
|
|
9
9
|
|
|
10
|
-
<sup><a href="https://bundlephobia.com/package/masonry-simple">
|
|
10
|
+
<sup><a href="https://bundlephobia.com/package/masonry-simple">500B gzipped</a></sup>
|
|
11
11
|
<h3><a href="https://codepen.io/ux-ui/pen/poxGEqX">Demo</a></h3>
|
|
12
12
|
|
|
13
13
|
</div>
|
|
@@ -34,8 +34,7 @@ import MasonrySimple from 'masonry-simple'
|
|
|
34
34
|
const masonry = new MasonrySimple()
|
|
35
35
|
|
|
36
36
|
masonry.options({
|
|
37
|
-
container: '.masonry'
|
|
38
|
-
timeout: 200
|
|
37
|
+
container: '.masonry'
|
|
39
38
|
})
|
|
40
39
|
```
|
|
41
40
|
```HTML
|
|
@@ -55,7 +54,6 @@ masonry.options({
|
|
|
55
54
|
| Arg | Default | Description |
|
|
56
55
|
| --- | --- | --- |
|
|
57
56
|
| `container` | `'.masonry'` | The HTML class of the element inside which the grid elements will be located. |
|
|
58
|
-
| `debounce` | `200` | Sets the delay when resizing the browser window. `0` — disables the delay and allows the grid to rebuild faster. |
|
|
59
57
|
<br>
|
|
60
58
|
|
|
61
59
|
### License
|
package/dist/index.js
CHANGED
|
@@ -12,18 +12,15 @@ class $4fa36e821943b400$export$2e2bcd8739ae039 {
|
|
|
12
12
|
constructor(){
|
|
13
13
|
this.grid = null;
|
|
14
14
|
this.gridItems = [];
|
|
15
|
-
this.timeout = 200;
|
|
16
|
-
this.resizeAllItems = this.debounce(this.resizeAllItems.bind(this), this.timeout);
|
|
17
15
|
this.resizeObserver = null;
|
|
18
16
|
}
|
|
19
17
|
options(options = {}) {
|
|
20
|
-
const { container: container = ".masonry"
|
|
18
|
+
const { container: container = ".masonry" } = options;
|
|
21
19
|
this.grid = container instanceof HTMLElement ? container : document.querySelector(container);
|
|
22
20
|
this.gridItems = Array.from(this.grid.children);
|
|
23
21
|
this.grid.style.contain = "layout";
|
|
24
|
-
this.resizeObserver = new ResizeObserver(this.
|
|
22
|
+
this.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this));
|
|
25
23
|
this.resizeObserver.observe(this.grid);
|
|
26
|
-
this.resizeAllItems = this.debounce(this.resizeAllItems.bind(this), timeout);
|
|
27
24
|
this.resizeAllItems();
|
|
28
25
|
}
|
|
29
26
|
resizeItem(item, rowHeight, rowGap) {
|
|
@@ -36,24 +33,8 @@ class $4fa36e821943b400$export$2e2bcd8739ae039 {
|
|
|
36
33
|
this.grid.style.alignItems = "start";
|
|
37
34
|
this.gridItems.forEach((item)=>this.resizeItem(item, rowHeight, rowGap));
|
|
38
35
|
this.grid.style.alignItems = "stretch";
|
|
39
|
-
|
|
40
|
-
this.gridItems.forEach((item)=>this.resizeItem(item, rowHeight, rowGap));
|
|
41
|
-
}, 0);
|
|
42
|
-
}
|
|
43
|
-
debounce(func, wait) {
|
|
44
|
-
let timeout;
|
|
45
|
-
return function executedFunction(...args) {
|
|
46
|
-
const later = ()=>{
|
|
47
|
-
clearTimeout(timeout);
|
|
48
|
-
func(...args);
|
|
49
|
-
};
|
|
50
|
-
clearTimeout(timeout);
|
|
51
|
-
timeout = setTimeout(later, wait);
|
|
52
|
-
};
|
|
36
|
+
this.gridItems.forEach((item)=>this.resizeItem(item, rowHeight, rowGap));
|
|
53
37
|
}
|
|
54
|
-
debouncedResize = ()=>{
|
|
55
|
-
this.resizeAllItems();
|
|
56
|
-
};
|
|
57
38
|
}
|
|
58
39
|
|
|
59
40
|
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;AAAe;IACd,aAAc;QACb,IAAI,CAAC,IAAI,GAAG,IAAI;QAChB,IAAI,CAAC,SAAS,GAAG,EAAE;QACnB,IAAI,CAAC,
|
|
1
|
+
{"mappings":";;;;;;;;;;AAAe;IACd,aAAc;QACb,IAAI,CAAC,IAAI,GAAG,IAAI;QAChB,IAAI,CAAC,SAAS,GAAG,EAAE;QACnB,IAAI,CAAC,cAAc,GAAG,IAAI;IAC3B;IAEA,QAAQ,UAAU,CAAC,CAAC,EAAE;QACrB,MAAM,aACL,YAAY,aACZ,GAAG;QAEJ,IAAI,CAAC,IAAI,GAAG,qBAAqB,cAAc,YAAY,SAAS,aAAa,CAAC,UAAU;QAC5F,IAAI,CAAC,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ;QAC9C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG;QAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,eAAe,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI;QACtE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;QACrC,IAAI,CAAC,cAAc;IACpB;IAEA,WAAW,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE;QACnC,MAAM,UAAU,KAAK,IAAI,CAAC,AAAC,CAAA,KAAK,YAAY,GAAG,MAAK,IAAM,CAAA,YAAY,MAAK;QAC3E,KAAK,KAAK,CAAC,UAAU,GAAG,UAAU;IACnC;IAEA,iBAAiB;QAChB,MAAM,YAAY;QAClB,MAAM,SAAS,SAAS,OAAO,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,gBAAgB,CAAC;QAC5E,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG;QAC7B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA,OAAQ,IAAI,CAAC,UAAU,CAAC,MAAM,WAAW;QAChE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG;QAC7B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA,OAAQ,IAAI,CAAC,UAAU,CAAC,MAAM,WAAW;IACjE;AACD","sources":["src/index.js"],"sourcesContent":["export default class MasonrySimple {\r\n\tconstructor() {\r\n\t\tthis.grid = null\r\n\t\tthis.gridItems = []\r\n\t\tthis.resizeObserver = null\r\n\t}\r\n\r\n\toptions(options = {}) {\r\n\t\tconst {\r\n\t\t\tcontainer = '.masonry',\r\n\t\t} = options\r\n\r\n\t\tthis.grid = container instanceof HTMLElement ? container : document.querySelector(container)\r\n\t\tthis.gridItems = Array.from(this.grid.children)\r\n\t\tthis.grid.style.contain = 'layout'\r\n\t\tthis.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this))\r\n\t\tthis.resizeObserver.observe(this.grid)\r\n\t\tthis.resizeAllItems()\r\n\t}\r\n\r\n\tresizeItem(item, rowHeight, rowGap) {\r\n\t\tconst rowSpan = Math.ceil((item.clientHeight + rowGap) / (rowHeight + rowGap))\r\n\t\titem.style.gridRowEnd = 'span ' + rowSpan\r\n\t}\r\n\r\n\tresizeAllItems() {\r\n\t\tconst rowHeight = 1\r\n\t\tconst rowGap = parseInt(window.getComputedStyle(this.grid).getPropertyValue('grid-row-gap'))\r\n\t\tthis.grid.style.alignItems = 'start'\r\n\t\tthis.gridItems.forEach(item => this.resizeItem(item, rowHeight, rowGap))\r\n\t\tthis.grid.style.alignItems = 'stretch'\r\n\t\tthis.gridItems.forEach(item => this.resizeItem(item, rowHeight, rowGap))\r\n\t}\r\n}"],"names":[],"version":3,"file":"index.js.map"}
|
package/dist/index.module.js
CHANGED
|
@@ -2,18 +2,15 @@ class $cf838c15c8b009ba$export$2e2bcd8739ae039 {
|
|
|
2
2
|
constructor(){
|
|
3
3
|
this.grid = null;
|
|
4
4
|
this.gridItems = [];
|
|
5
|
-
this.timeout = 200;
|
|
6
|
-
this.resizeAllItems = this.debounce(this.resizeAllItems.bind(this), this.timeout);
|
|
7
5
|
this.resizeObserver = null;
|
|
8
6
|
}
|
|
9
7
|
options(options = {}) {
|
|
10
|
-
const { container: container = ".masonry"
|
|
8
|
+
const { container: container = ".masonry" } = options;
|
|
11
9
|
this.grid = container instanceof HTMLElement ? container : document.querySelector(container);
|
|
12
10
|
this.gridItems = Array.from(this.grid.children);
|
|
13
11
|
this.grid.style.contain = "layout";
|
|
14
|
-
this.resizeObserver = new ResizeObserver(this.
|
|
12
|
+
this.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this));
|
|
15
13
|
this.resizeObserver.observe(this.grid);
|
|
16
|
-
this.resizeAllItems = this.debounce(this.resizeAllItems.bind(this), timeout);
|
|
17
14
|
this.resizeAllItems();
|
|
18
15
|
}
|
|
19
16
|
resizeItem(item, rowHeight, rowGap) {
|
|
@@ -26,24 +23,8 @@ class $cf838c15c8b009ba$export$2e2bcd8739ae039 {
|
|
|
26
23
|
this.grid.style.alignItems = "start";
|
|
27
24
|
this.gridItems.forEach((item)=>this.resizeItem(item, rowHeight, rowGap));
|
|
28
25
|
this.grid.style.alignItems = "stretch";
|
|
29
|
-
|
|
30
|
-
this.gridItems.forEach((item)=>this.resizeItem(item, rowHeight, rowGap));
|
|
31
|
-
}, 0);
|
|
32
|
-
}
|
|
33
|
-
debounce(func, wait) {
|
|
34
|
-
let timeout;
|
|
35
|
-
return function executedFunction(...args) {
|
|
36
|
-
const later = ()=>{
|
|
37
|
-
clearTimeout(timeout);
|
|
38
|
-
func(...args);
|
|
39
|
-
};
|
|
40
|
-
clearTimeout(timeout);
|
|
41
|
-
timeout = setTimeout(later, wait);
|
|
42
|
-
};
|
|
26
|
+
this.gridItems.forEach((item)=>this.resizeItem(item, rowHeight, rowGap));
|
|
43
27
|
}
|
|
44
|
-
debouncedResize = ()=>{
|
|
45
|
-
this.resizeAllItems();
|
|
46
|
-
};
|
|
47
28
|
}
|
|
48
29
|
|
|
49
30
|
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAe;IACd,aAAc;QACb,IAAI,CAAC,IAAI,GAAG,IAAI;QAChB,IAAI,CAAC,SAAS,GAAG,EAAE;QACnB,IAAI,CAAC,
|
|
1
|
+
{"mappings":"AAAe;IACd,aAAc;QACb,IAAI,CAAC,IAAI,GAAG,IAAI;QAChB,IAAI,CAAC,SAAS,GAAG,EAAE;QACnB,IAAI,CAAC,cAAc,GAAG,IAAI;IAC3B;IAEA,QAAQ,UAAU,CAAC,CAAC,EAAE;QACrB,MAAM,aACL,YAAY,aACZ,GAAG;QAEJ,IAAI,CAAC,IAAI,GAAG,qBAAqB,cAAc,YAAY,SAAS,aAAa,CAAC,UAAU;QAC5F,IAAI,CAAC,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ;QAC9C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG;QAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,eAAe,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI;QACtE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;QACrC,IAAI,CAAC,cAAc;IACpB;IAEA,WAAW,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE;QACnC,MAAM,UAAU,KAAK,IAAI,CAAC,AAAC,CAAA,KAAK,YAAY,GAAG,MAAK,IAAM,CAAA,YAAY,MAAK;QAC3E,KAAK,KAAK,CAAC,UAAU,GAAG,UAAU;IACnC;IAEA,iBAAiB;QAChB,MAAM,YAAY;QAClB,MAAM,SAAS,SAAS,OAAO,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,gBAAgB,CAAC;QAC5E,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG;QAC7B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA,OAAQ,IAAI,CAAC,UAAU,CAAC,MAAM,WAAW;QAChE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG;QAC7B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA,OAAQ,IAAI,CAAC,UAAU,CAAC,MAAM,WAAW;IACjE;AACD","sources":["src/index.js"],"sourcesContent":["export default class MasonrySimple {\r\n\tconstructor() {\r\n\t\tthis.grid = null\r\n\t\tthis.gridItems = []\r\n\t\tthis.resizeObserver = null\r\n\t}\r\n\r\n\toptions(options = {}) {\r\n\t\tconst {\r\n\t\t\tcontainer = '.masonry',\r\n\t\t} = options\r\n\r\n\t\tthis.grid = container instanceof HTMLElement ? container : document.querySelector(container)\r\n\t\tthis.gridItems = Array.from(this.grid.children)\r\n\t\tthis.grid.style.contain = 'layout'\r\n\t\tthis.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this))\r\n\t\tthis.resizeObserver.observe(this.grid)\r\n\t\tthis.resizeAllItems()\r\n\t}\r\n\r\n\tresizeItem(item, rowHeight, rowGap) {\r\n\t\tconst rowSpan = Math.ceil((item.clientHeight + rowGap) / (rowHeight + rowGap))\r\n\t\titem.style.gridRowEnd = 'span ' + rowSpan\r\n\t}\r\n\r\n\tresizeAllItems() {\r\n\t\tconst rowHeight = 1\r\n\t\tconst rowGap = parseInt(window.getComputedStyle(this.grid).getPropertyValue('grid-row-gap'))\r\n\t\tthis.grid.style.alignItems = 'start'\r\n\t\tthis.gridItems.forEach(item => this.resizeItem(item, rowHeight, rowGap))\r\n\t\tthis.grid.style.alignItems = 'stretch'\r\n\t\tthis.gridItems.forEach(item => this.resizeItem(item, rowHeight, rowGap))\r\n\t}\r\n}"],"names":[],"version":3,"file":"index.module.js.map"}
|
package/package.json
CHANGED
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/src/index.js
CHANGED
|
@@ -2,23 +2,19 @@ export default class MasonrySimple {
|
|
|
2
2
|
constructor() {
|
|
3
3
|
this.grid = null
|
|
4
4
|
this.gridItems = []
|
|
5
|
-
this.timeout = 200
|
|
6
|
-
this.resizeAllItems = this.debounce(this.resizeAllItems.bind(this), this.timeout)
|
|
7
5
|
this.resizeObserver = null
|
|
8
6
|
}
|
|
9
7
|
|
|
10
8
|
options(options = {}) {
|
|
11
9
|
const {
|
|
12
10
|
container = '.masonry',
|
|
13
|
-
timeout = this.timeout
|
|
14
11
|
} = options
|
|
15
12
|
|
|
16
13
|
this.grid = container instanceof HTMLElement ? container : document.querySelector(container)
|
|
17
14
|
this.gridItems = Array.from(this.grid.children)
|
|
18
15
|
this.grid.style.contain = 'layout'
|
|
19
|
-
this.resizeObserver = new ResizeObserver(this.
|
|
16
|
+
this.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this))
|
|
20
17
|
this.resizeObserver.observe(this.grid)
|
|
21
|
-
this.resizeAllItems = this.debounce(this.resizeAllItems.bind(this), timeout)
|
|
22
18
|
this.resizeAllItems()
|
|
23
19
|
}
|
|
24
20
|
|
|
@@ -33,24 +29,6 @@ export default class MasonrySimple {
|
|
|
33
29
|
this.grid.style.alignItems = 'start'
|
|
34
30
|
this.gridItems.forEach(item => this.resizeItem(item, rowHeight, rowGap))
|
|
35
31
|
this.grid.style.alignItems = 'stretch'
|
|
36
|
-
|
|
37
|
-
this.gridItems.forEach(item => this.resizeItem(item, rowHeight, rowGap))
|
|
38
|
-
}, 0)
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
debounce(func, wait) {
|
|
42
|
-
let timeout
|
|
43
|
-
return function executedFunction(...args) {
|
|
44
|
-
const later = () => {
|
|
45
|
-
clearTimeout(timeout)
|
|
46
|
-
func(...args)
|
|
47
|
-
}
|
|
48
|
-
clearTimeout(timeout)
|
|
49
|
-
timeout = setTimeout(later, wait)
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
debouncedResize = () => {
|
|
54
|
-
this.resizeAllItems()
|
|
32
|
+
this.gridItems.forEach(item => this.resizeItem(item, rowHeight, rowGap))
|
|
55
33
|
}
|
|
56
34
|
}
|