masonry-simple 3.0.1 → 3.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 +8 -12
- package/dist/index.js +26 -26
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +26 -26
- package/dist/index.module.js.map +1 -1
- package/dist/masonry-simple.min.js +1 -1
- package/package.json +5 -3
- package/src/index.js +32 -27
- package/src/masonry-simple.js +32 -27
- package/kitten.gif +0 -0
package/README.md
CHANGED
|
@@ -10,19 +10,14 @@ The MasonrySimple class is designed to create a masonry layout of elements on a
|
|
|
10
10
|
|
|
11
11
|
<sup>600B gzipped</sup>
|
|
12
12
|
|
|
13
|
-
<a href="https://
|
|
14
|
-
|
|
15
|
-
<br>
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
Thank you for your interest in masonry-simple! I'm glad to see it's being used.<br>If you'd like to support it, it would be great if you could leave a [star on GitHub](https://github.com/ux-ui-pro/masonry-simple).
|
|
13
|
+
<a href="https://codepen.io/ux-ui/pen/poxGEqX">DEMO</a>
|
|
20
14
|
|
|
21
15
|
</div>
|
|
22
16
|
|
|
23
17
|
<br>
|
|
24
18
|
|
|
25
|
-
|
|
19
|
+
➤ **Installation**
|
|
20
|
+
|
|
26
21
|
<sub>**Recommended**</sub>
|
|
27
22
|
```console
|
|
28
23
|
$ yarn add masonry-simple
|
|
@@ -33,13 +28,13 @@ $ yarn add masonry-simple
|
|
|
33
28
|
```
|
|
34
29
|
<br>
|
|
35
30
|
|
|
36
|
-
|
|
31
|
+
➤ **Import**
|
|
37
32
|
```javascript
|
|
38
33
|
import MasonrySimple from 'masonry-simple';
|
|
39
34
|
```
|
|
40
35
|
<br>
|
|
41
36
|
|
|
42
|
-
|
|
37
|
+
➤ **Usage**
|
|
43
38
|
|
|
44
39
|
<sub>The container can be specified in the following formats: a string value representing the class or id of an element in the DOM, such as '.masonry' or '#masonry'. A Vue reactive reference that contains a DOM element.</sub>
|
|
45
40
|
|
|
@@ -71,11 +66,12 @@ masonry.init();
|
|
|
71
66
|
```
|
|
72
67
|
<br>
|
|
73
68
|
|
|
74
|
-
|
|
69
|
+
➤ **Destroy**
|
|
75
70
|
```javascript
|
|
76
71
|
masonry.destroy();
|
|
77
72
|
```
|
|
78
73
|
<br>
|
|
79
74
|
|
|
80
|
-
|
|
75
|
+
➤ **License**
|
|
76
|
+
|
|
81
77
|
<sup>masonry-simple is released under MIT license</sup>
|
package/dist/index.js
CHANGED
|
@@ -11,42 +11,42 @@ $parcel$defineInteropFlag(module.exports);
|
|
|
11
11
|
|
|
12
12
|
$parcel$export(module.exports, "default", () => $4fa36e821943b400$export$2e2bcd8739ae039);
|
|
13
13
|
class $4fa36e821943b400$var$MasonrySimple {
|
|
14
|
-
container = null;
|
|
15
|
-
gridItems = [];
|
|
16
|
-
rowHeight = 1;
|
|
17
|
-
rowGap = 0;
|
|
18
|
-
resizeTimeout = null;
|
|
19
|
-
resizeObserver = new ResizeObserver(this
|
|
14
|
+
#container = null;
|
|
15
|
+
#gridItems = [];
|
|
16
|
+
#rowHeight = 1;
|
|
17
|
+
#rowGap = 0;
|
|
18
|
+
#resizeTimeout = null;
|
|
19
|
+
#resizeObserver = new ResizeObserver(this.#handleResize.bind(this));
|
|
20
20
|
constructor(options = {}){
|
|
21
|
-
this
|
|
21
|
+
this.#container = options.container instanceof HTMLElement ? options.container : document.querySelector(options.container || ".masonry");
|
|
22
22
|
}
|
|
23
|
-
handleResize() {
|
|
24
|
-
if (this
|
|
25
|
-
this
|
|
26
|
-
this
|
|
23
|
+
#handleResize() {
|
|
24
|
+
if (this.#resizeTimeout) window.cancelAnimationFrame(this.#resizeTimeout);
|
|
25
|
+
this.#resizeTimeout = window.requestAnimationFrame(()=>{
|
|
26
|
+
this.#resizeAllItems();
|
|
27
27
|
});
|
|
28
28
|
}
|
|
29
|
-
resizeAllItems() {
|
|
30
|
-
this
|
|
31
|
-
this
|
|
32
|
-
const rowSpan = Math.ceil((item.clientHeight + this
|
|
29
|
+
#resizeAllItems() {
|
|
30
|
+
this.#container.style.alignItems = "start";
|
|
31
|
+
this.#gridItems.forEach((item)=>{
|
|
32
|
+
const rowSpan = Math.ceil((item.clientHeight + this.#rowGap) / (this.#rowHeight + this.#rowGap));
|
|
33
33
|
item.style.gridRowEnd = `span ${rowSpan}`;
|
|
34
34
|
});
|
|
35
35
|
}
|
|
36
36
|
init() {
|
|
37
|
-
if (!this
|
|
38
|
-
const { rowGap: rowGap } = getComputedStyle(this
|
|
39
|
-
this
|
|
40
|
-
this
|
|
41
|
-
this
|
|
42
|
-
this
|
|
43
|
-
this
|
|
37
|
+
if (!this.#container) return;
|
|
38
|
+
const { rowGap: rowGap } = getComputedStyle(this.#container);
|
|
39
|
+
this.#gridItems = Array.from(this.#container.children);
|
|
40
|
+
this.#container.style.contain = "layout";
|
|
41
|
+
this.#rowGap = parseInt(rowGap, 10);
|
|
42
|
+
this.#resizeObserver.observe(this.#container);
|
|
43
|
+
this.#resizeAllItems();
|
|
44
44
|
}
|
|
45
45
|
destroy() {
|
|
46
|
-
this
|
|
47
|
-
this
|
|
48
|
-
this
|
|
49
|
-
this
|
|
46
|
+
this.#resizeObserver.unobserve(this.#container);
|
|
47
|
+
this.#container.style.contain = "";
|
|
48
|
+
this.#container.style.alignItems = "";
|
|
49
|
+
this.#gridItems.forEach((item)=>{
|
|
50
50
|
item.style.gridRowEnd = "";
|
|
51
51
|
});
|
|
52
52
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;AAAA,MAAM;IACJ,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;AAAA,MAAM;IACJ,CAAC,SAAS,GAAG,KAAK;IAElB,CAAC,SAAS,GAAG,EAAE,CAAC;IAEhB,CAAC,SAAS,GAAG,EAAE;IAEf,CAAC,MAAM,GAAG,EAAE;IAEZ,CAAC,aAAa,GAAG,KAAK;IAEtB,CAAC,cAAc,GAAG,IAAI,eAAe,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,GAAG;IAEpE,YAAY,UAAU,CAAC,CAAC,CAAE;QACxB,IAAI,CAAC,CAAC,SAAS,GACb,QAAQ,SAAS,YAAY,cACzB,QAAQ,SAAS,GACjB,SAAS,aAAa,CAAC,QAAQ,SAAS,IAAI;IACpD;IAEA,CAAC,YAAY;QACX,IAAI,IAAI,CAAC,CAAC,aAAa,EACrB,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAC,aAAa;QAGjD,IAAI,CAAC,CAAC,aAAa,GAAG,OAAO,qBAAqB,CAAC;YACjD,IAAI,CAAC,CAAC,cAAc;QACtB;IACF;IAEA,CAAC,cAAc;QACb,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG;QACnC,IAAI,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YACvB,MAAM,UAAU,KAAK,IAAI,CACvB,AAAC,CAAA,KAAK,YAAY,GAAG,IAAI,CAAC,CAAC,MAAM,AAAD,IAAM,CAAA,IAAI,CAAC,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC,MAAM,AAAD;YAGrE,KAAK,KAAK,CAAC,UAAU,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC;QAC3C;IACF;IAEA,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE;QAEtB,MAAM,UAAE,MAAM,EAAE,GAAG,iBAAiB,IAAI,CAAC,CAAC,SAAS;QAEnD,IAAI,CAAC,CAAC,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,QAAQ;QACrD,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG;QAChC,IAAI,CAAC,CAAC,MAAM,GAAG,SAAS,QAAQ;QAChC,IAAI,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS;QAC5C,IAAI,CAAC,CAAC,cAAc;IACtB;IAEA,UAAU;QACR,IAAI,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS;QAC9C,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG;QAChC,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG;QACnC,IAAI,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YACvB,KAAK,KAAK,CAAC,UAAU,GAAG;QAC1B;IACF;AACF;IAEA,2CAAe","sources":["src/index.js"],"sourcesContent":["class MasonrySimple {\n #container = null;\n\n #gridItems = [];\n\n #rowHeight = 1;\n\n #rowGap = 0;\n\n #resizeTimeout = null;\n\n #resizeObserver = new ResizeObserver(this.#handleResize.bind(this));\n\n constructor(options = {}) {\n this.#container =\n options.container instanceof HTMLElement\n ? options.container\n : document.querySelector(options.container || '.masonry');\n }\n\n #handleResize() {\n if (this.#resizeTimeout) {\n window.cancelAnimationFrame(this.#resizeTimeout);\n }\n\n this.#resizeTimeout = window.requestAnimationFrame(() => {\n this.#resizeAllItems();\n });\n }\n\n #resizeAllItems() {\n this.#container.style.alignItems = 'start';\n this.#gridItems.forEach((item) => {\n const rowSpan = Math.ceil(\n (item.clientHeight + this.#rowGap) / (this.#rowHeight + this.#rowGap)\n );\n\n item.style.gridRowEnd = `span ${rowSpan}`;\n });\n }\n\n init() {\n if (!this.#container) return;\n\n const { rowGap } = getComputedStyle(this.#container);\n\n this.#gridItems = Array.from(this.#container.children);\n this.#container.style.contain = 'layout';\n this.#rowGap = parseInt(rowGap, 10);\n this.#resizeObserver.observe(this.#container);\n this.#resizeAllItems();\n }\n\n destroy() {\n this.#resizeObserver.unobserve(this.#container);\n this.#container.style.contain = '';\n this.#container.style.alignItems = '';\n this.#gridItems.forEach((item) => {\n item.style.gridRowEnd = '';\n });\n }\n}\n\nexport default MasonrySimple;\n"],"names":[],"version":3,"file":"index.js.map"}
|
package/dist/index.module.js
CHANGED
|
@@ -1,40 +1,40 @@
|
|
|
1
1
|
class $cf838c15c8b009ba$var$MasonrySimple {
|
|
2
|
-
container = null;
|
|
3
|
-
gridItems = [];
|
|
4
|
-
rowHeight = 1;
|
|
5
|
-
rowGap = 0;
|
|
6
|
-
resizeTimeout = null;
|
|
7
|
-
resizeObserver = new ResizeObserver(this
|
|
2
|
+
#container = null;
|
|
3
|
+
#gridItems = [];
|
|
4
|
+
#rowHeight = 1;
|
|
5
|
+
#rowGap = 0;
|
|
6
|
+
#resizeTimeout = null;
|
|
7
|
+
#resizeObserver = new ResizeObserver(this.#handleResize.bind(this));
|
|
8
8
|
constructor(options = {}){
|
|
9
|
-
this
|
|
9
|
+
this.#container = options.container instanceof HTMLElement ? options.container : document.querySelector(options.container || ".masonry");
|
|
10
10
|
}
|
|
11
|
-
handleResize() {
|
|
12
|
-
if (this
|
|
13
|
-
this
|
|
14
|
-
this
|
|
11
|
+
#handleResize() {
|
|
12
|
+
if (this.#resizeTimeout) window.cancelAnimationFrame(this.#resizeTimeout);
|
|
13
|
+
this.#resizeTimeout = window.requestAnimationFrame(()=>{
|
|
14
|
+
this.#resizeAllItems();
|
|
15
15
|
});
|
|
16
16
|
}
|
|
17
|
-
resizeAllItems() {
|
|
18
|
-
this
|
|
19
|
-
this
|
|
20
|
-
const rowSpan = Math.ceil((item.clientHeight + this
|
|
17
|
+
#resizeAllItems() {
|
|
18
|
+
this.#container.style.alignItems = "start";
|
|
19
|
+
this.#gridItems.forEach((item)=>{
|
|
20
|
+
const rowSpan = Math.ceil((item.clientHeight + this.#rowGap) / (this.#rowHeight + this.#rowGap));
|
|
21
21
|
item.style.gridRowEnd = `span ${rowSpan}`;
|
|
22
22
|
});
|
|
23
23
|
}
|
|
24
24
|
init() {
|
|
25
|
-
if (!this
|
|
26
|
-
const { rowGap: rowGap } = getComputedStyle(this
|
|
27
|
-
this
|
|
28
|
-
this
|
|
29
|
-
this
|
|
30
|
-
this
|
|
31
|
-
this
|
|
25
|
+
if (!this.#container) return;
|
|
26
|
+
const { rowGap: rowGap } = getComputedStyle(this.#container);
|
|
27
|
+
this.#gridItems = Array.from(this.#container.children);
|
|
28
|
+
this.#container.style.contain = "layout";
|
|
29
|
+
this.#rowGap = parseInt(rowGap, 10);
|
|
30
|
+
this.#resizeObserver.observe(this.#container);
|
|
31
|
+
this.#resizeAllItems();
|
|
32
32
|
}
|
|
33
33
|
destroy() {
|
|
34
|
-
this
|
|
35
|
-
this
|
|
36
|
-
this
|
|
37
|
-
this
|
|
34
|
+
this.#resizeObserver.unobserve(this.#container);
|
|
35
|
+
this.#container.style.contain = "";
|
|
36
|
+
this.#container.style.alignItems = "";
|
|
37
|
+
this.#gridItems.forEach((item)=>{
|
|
38
38
|
item.style.gridRowEnd = "";
|
|
39
39
|
});
|
|
40
40
|
}
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAA,MAAM;IACJ,
|
|
1
|
+
{"mappings":"AAAA,MAAM;IACJ,CAAC,SAAS,GAAG,KAAK;IAElB,CAAC,SAAS,GAAG,EAAE,CAAC;IAEhB,CAAC,SAAS,GAAG,EAAE;IAEf,CAAC,MAAM,GAAG,EAAE;IAEZ,CAAC,aAAa,GAAG,KAAK;IAEtB,CAAC,cAAc,GAAG,IAAI,eAAe,IAAI,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,GAAG;IAEpE,YAAY,UAAU,CAAC,CAAC,CAAE;QACxB,IAAI,CAAC,CAAC,SAAS,GACb,QAAQ,SAAS,YAAY,cACzB,QAAQ,SAAS,GACjB,SAAS,aAAa,CAAC,QAAQ,SAAS,IAAI;IACpD;IAEA,CAAC,YAAY;QACX,IAAI,IAAI,CAAC,CAAC,aAAa,EACrB,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAC,aAAa;QAGjD,IAAI,CAAC,CAAC,aAAa,GAAG,OAAO,qBAAqB,CAAC;YACjD,IAAI,CAAC,CAAC,cAAc;QACtB;IACF;IAEA,CAAC,cAAc;QACb,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG;QACnC,IAAI,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YACvB,MAAM,UAAU,KAAK,IAAI,CACvB,AAAC,CAAA,KAAK,YAAY,GAAG,IAAI,CAAC,CAAC,MAAM,AAAD,IAAM,CAAA,IAAI,CAAC,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC,MAAM,AAAD;YAGrE,KAAK,KAAK,CAAC,UAAU,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC;QAC3C;IACF;IAEA,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE;QAEtB,MAAM,UAAE,MAAM,EAAE,GAAG,iBAAiB,IAAI,CAAC,CAAC,SAAS;QAEnD,IAAI,CAAC,CAAC,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,QAAQ;QACrD,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG;QAChC,IAAI,CAAC,CAAC,MAAM,GAAG,SAAS,QAAQ;QAChC,IAAI,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS;QAC5C,IAAI,CAAC,CAAC,cAAc;IACtB;IAEA,UAAU;QACR,IAAI,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS;QAC9C,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG;QAChC,IAAI,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,GAAG;QACnC,IAAI,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YACvB,KAAK,KAAK,CAAC,UAAU,GAAG;QAC1B;IACF;AACF;IAEA,2CAAe","sources":["src/index.js"],"sourcesContent":["class MasonrySimple {\n #container = null;\n\n #gridItems = [];\n\n #rowHeight = 1;\n\n #rowGap = 0;\n\n #resizeTimeout = null;\n\n #resizeObserver = new ResizeObserver(this.#handleResize.bind(this));\n\n constructor(options = {}) {\n this.#container =\n options.container instanceof HTMLElement\n ? options.container\n : document.querySelector(options.container || '.masonry');\n }\n\n #handleResize() {\n if (this.#resizeTimeout) {\n window.cancelAnimationFrame(this.#resizeTimeout);\n }\n\n this.#resizeTimeout = window.requestAnimationFrame(() => {\n this.#resizeAllItems();\n });\n }\n\n #resizeAllItems() {\n this.#container.style.alignItems = 'start';\n this.#gridItems.forEach((item) => {\n const rowSpan = Math.ceil(\n (item.clientHeight + this.#rowGap) / (this.#rowHeight + this.#rowGap)\n );\n\n item.style.gridRowEnd = `span ${rowSpan}`;\n });\n }\n\n init() {\n if (!this.#container) return;\n\n const { rowGap } = getComputedStyle(this.#container);\n\n this.#gridItems = Array.from(this.#container.children);\n this.#container.style.contain = 'layout';\n this.#rowGap = parseInt(rowGap, 10);\n this.#resizeObserver.observe(this.#container);\n this.#resizeAllItems();\n }\n\n destroy() {\n this.#resizeObserver.unobserve(this.#container);\n this.#container.style.contain = '';\n this.#container.style.alignItems = '';\n this.#gridItems.forEach((item) => {\n item.style.gridRowEnd = '';\n });\n }\n}\n\nexport default MasonrySimple;\n"],"names":[],"version":3,"file":"index.module.js.map"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function e(e
|
|
1
|
+
function t(t,e){if(e.has(t))throw TypeError("Cannot initialize the same private elements twice on an object")}function e(t,e,n){if(!e.has(t))throw TypeError("attempted to "+n+" private field on non-instance");return e.get(t)}function n(t,n){var i=e(t,n,"get");return i.get?i.get.call(t):i.value}function i(e,n,i){t(e,n),n.set(e,i)}function a(t,n,i){var a=e(t,n,"set");return!function(t,e,n){if(e.set)e.set.call(t,n);else{if(!e.writable)throw TypeError("attempted to set read only private field");e.value=n}}(t,a,i),i}function r(t,e,n){if(!e.has(t))throw TypeError("attempted to get private field on non-instance");return n}function o(e,n){t(e,n),n.add(e)}var s=new WeakMap,l=new WeakMap,c=new WeakMap,h=new WeakMap,u=new WeakMap,f=new WeakMap,v=new WeakSet,w=new WeakSet,d=function(){var t;function e(){var t,n,d=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};!function(t,e){if(!(t instanceof e))throw TypeError("Cannot call a class as a function")}(this,e),o(this,v),o(this,w),i(this,s,{writable:!0,value:null}),i(this,l,{writable:!0,value:[]}),i(this,c,{writable:!0,value:1}),i(this,h,{writable:!0,value:0}),i(this,u,{writable:!0,value:null}),i(this,f,{writable:!0,value:new ResizeObserver(r(this,v,y).bind(this))}),a(this,s,(t=d.container,null!=(n=HTMLElement)&&"undefined"!=typeof Symbol&&n[Symbol.hasInstance]?!!n[Symbol.hasInstance](t):t instanceof n)?d.container:document.querySelector(d.container||".masonry"))}return t=[{key:"init",value:function(){if(n(this,s)){var t=getComputedStyle(n(this,s)).rowGap;a(this,l,Array.from(n(this,s).children)),n(this,s).style.contain="layout",a(this,h,parseInt(t,10)),n(this,f).observe(n(this,s)),r(this,w,p).call(this)}}},{key:"destroy",value:function(){n(this,f).unobserve(n(this,s)),n(this,s).style.contain="",n(this,s).style.alignItems="",n(this,l).forEach(function(t){t.style.gridRowEnd=""})}}],function(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}(e.prototype,t),e}();function y(){var t=this;n(this,u)&&window.cancelAnimationFrame(n(this,u)),a(this,u,window.requestAnimationFrame(function(){r(t,w,p).call(t)}))}function p(){var t=this;n(this,s).style.alignItems="start",n(this,l).forEach(function(e){var i=Math.ceil((e.clientHeight+n(t,h))/(n(t,c)+n(t,h)));e.style.gridRowEnd="span ".concat(i)})}document.addEventListener("DOMContentLoaded",function(){new d().init()});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "masonry-simple",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.1.1",
|
|
4
4
|
"description": "Responsive masonry grid",
|
|
5
5
|
"author": "ux-ui.pro",
|
|
6
6
|
"license": "MIT",
|
|
@@ -29,9 +29,11 @@
|
|
|
29
29
|
"build": "yarn clean && yarn minify && parcel build"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"
|
|
32
|
+
"@swc/cli": "^0.3.10",
|
|
33
|
+
"@swc/core": "^1.4.8",
|
|
34
|
+
"eslint": "^7.32.0 || ^8.57.0",
|
|
33
35
|
"eslint-config-airbnb-base": "^15.0.0",
|
|
34
|
-
"parcel": "^2.
|
|
36
|
+
"parcel": "^2.12.0"
|
|
35
37
|
},
|
|
36
38
|
"keywords": [
|
|
37
39
|
"masonry",
|
package/src/index.js
CHANGED
|
@@ -1,33 +1,38 @@
|
|
|
1
1
|
class MasonrySimple {
|
|
2
|
-
container = null;
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
#container = null;
|
|
3
|
+
|
|
4
|
+
#gridItems = [];
|
|
5
|
+
|
|
6
|
+
#rowHeight = 1;
|
|
7
|
+
|
|
8
|
+
#rowGap = 0;
|
|
9
|
+
|
|
10
|
+
#resizeTimeout = null;
|
|
11
|
+
|
|
12
|
+
#resizeObserver = new ResizeObserver(this.#handleResize.bind(this));
|
|
8
13
|
|
|
9
14
|
constructor(options = {}) {
|
|
10
|
-
this
|
|
15
|
+
this.#container =
|
|
11
16
|
options.container instanceof HTMLElement
|
|
12
17
|
? options.container
|
|
13
18
|
: document.querySelector(options.container || '.masonry');
|
|
14
19
|
}
|
|
15
20
|
|
|
16
|
-
handleResize() {
|
|
17
|
-
if (this
|
|
18
|
-
window.cancelAnimationFrame(this
|
|
21
|
+
#handleResize() {
|
|
22
|
+
if (this.#resizeTimeout) {
|
|
23
|
+
window.cancelAnimationFrame(this.#resizeTimeout);
|
|
19
24
|
}
|
|
20
25
|
|
|
21
|
-
this
|
|
22
|
-
this
|
|
26
|
+
this.#resizeTimeout = window.requestAnimationFrame(() => {
|
|
27
|
+
this.#resizeAllItems();
|
|
23
28
|
});
|
|
24
29
|
}
|
|
25
30
|
|
|
26
|
-
resizeAllItems() {
|
|
27
|
-
this
|
|
28
|
-
this
|
|
31
|
+
#resizeAllItems() {
|
|
32
|
+
this.#container.style.alignItems = 'start';
|
|
33
|
+
this.#gridItems.forEach((item) => {
|
|
29
34
|
const rowSpan = Math.ceil(
|
|
30
|
-
(item.clientHeight + this
|
|
35
|
+
(item.clientHeight + this.#rowGap) / (this.#rowHeight + this.#rowGap)
|
|
31
36
|
);
|
|
32
37
|
|
|
33
38
|
item.style.gridRowEnd = `span ${rowSpan}`;
|
|
@@ -35,22 +40,22 @@ class MasonrySimple {
|
|
|
35
40
|
}
|
|
36
41
|
|
|
37
42
|
init() {
|
|
38
|
-
if (!this
|
|
43
|
+
if (!this.#container) return;
|
|
39
44
|
|
|
40
|
-
const { rowGap } = getComputedStyle(this
|
|
45
|
+
const { rowGap } = getComputedStyle(this.#container);
|
|
41
46
|
|
|
42
|
-
this
|
|
43
|
-
this
|
|
44
|
-
this
|
|
45
|
-
this
|
|
46
|
-
this
|
|
47
|
+
this.#gridItems = Array.from(this.#container.children);
|
|
48
|
+
this.#container.style.contain = 'layout';
|
|
49
|
+
this.#rowGap = parseInt(rowGap, 10);
|
|
50
|
+
this.#resizeObserver.observe(this.#container);
|
|
51
|
+
this.#resizeAllItems();
|
|
47
52
|
}
|
|
48
53
|
|
|
49
54
|
destroy() {
|
|
50
|
-
this
|
|
51
|
-
this
|
|
52
|
-
this
|
|
53
|
-
this
|
|
55
|
+
this.#resizeObserver.unobserve(this.#container);
|
|
56
|
+
this.#container.style.contain = '';
|
|
57
|
+
this.#container.style.alignItems = '';
|
|
58
|
+
this.#gridItems.forEach((item) => {
|
|
54
59
|
item.style.gridRowEnd = '';
|
|
55
60
|
});
|
|
56
61
|
}
|
package/src/masonry-simple.js
CHANGED
|
@@ -1,33 +1,38 @@
|
|
|
1
1
|
class MasonrySimple {
|
|
2
|
-
container = null;
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
#container = null;
|
|
3
|
+
|
|
4
|
+
#gridItems = [];
|
|
5
|
+
|
|
6
|
+
#rowHeight = 1;
|
|
7
|
+
|
|
8
|
+
#rowGap = 0;
|
|
9
|
+
|
|
10
|
+
#resizeTimeout = null;
|
|
11
|
+
|
|
12
|
+
#resizeObserver = new ResizeObserver(this.#handleResize.bind(this));
|
|
8
13
|
|
|
9
14
|
constructor(options = {}) {
|
|
10
|
-
this
|
|
15
|
+
this.#container =
|
|
11
16
|
options.container instanceof HTMLElement
|
|
12
17
|
? options.container
|
|
13
18
|
: document.querySelector(options.container || '.masonry');
|
|
14
19
|
}
|
|
15
20
|
|
|
16
|
-
handleResize() {
|
|
17
|
-
if (this
|
|
18
|
-
window.cancelAnimationFrame(this
|
|
21
|
+
#handleResize() {
|
|
22
|
+
if (this.#resizeTimeout) {
|
|
23
|
+
window.cancelAnimationFrame(this.#resizeTimeout);
|
|
19
24
|
}
|
|
20
25
|
|
|
21
|
-
this
|
|
22
|
-
this
|
|
26
|
+
this.#resizeTimeout = window.requestAnimationFrame(() => {
|
|
27
|
+
this.#resizeAllItems();
|
|
23
28
|
});
|
|
24
29
|
}
|
|
25
30
|
|
|
26
|
-
resizeAllItems() {
|
|
27
|
-
this
|
|
28
|
-
this
|
|
31
|
+
#resizeAllItems() {
|
|
32
|
+
this.#container.style.alignItems = 'start';
|
|
33
|
+
this.#gridItems.forEach((item) => {
|
|
29
34
|
const rowSpan = Math.ceil(
|
|
30
|
-
(item.clientHeight + this
|
|
35
|
+
(item.clientHeight + this.#rowGap) / (this.#rowHeight + this.#rowGap)
|
|
31
36
|
);
|
|
32
37
|
|
|
33
38
|
item.style.gridRowEnd = `span ${rowSpan}`;
|
|
@@ -35,22 +40,22 @@ class MasonrySimple {
|
|
|
35
40
|
}
|
|
36
41
|
|
|
37
42
|
init() {
|
|
38
|
-
if (!this
|
|
43
|
+
if (!this.#container) return;
|
|
39
44
|
|
|
40
|
-
const { rowGap } = getComputedStyle(this
|
|
45
|
+
const { rowGap } = getComputedStyle(this.#container);
|
|
41
46
|
|
|
42
|
-
this
|
|
43
|
-
this
|
|
44
|
-
this
|
|
45
|
-
this
|
|
46
|
-
this
|
|
47
|
+
this.#gridItems = Array.from(this.#container.children);
|
|
48
|
+
this.#container.style.contain = 'layout';
|
|
49
|
+
this.#rowGap = parseInt(rowGap, 10);
|
|
50
|
+
this.#resizeObserver.observe(this.#container);
|
|
51
|
+
this.#resizeAllItems();
|
|
47
52
|
}
|
|
48
53
|
|
|
49
54
|
destroy() {
|
|
50
|
-
this
|
|
51
|
-
this
|
|
52
|
-
this
|
|
53
|
-
this
|
|
55
|
+
this.#resizeObserver.unobserve(this.#container);
|
|
56
|
+
this.#container.style.contain = '';
|
|
57
|
+
this.#container.style.alignItems = '';
|
|
58
|
+
this.#gridItems.forEach((item) => {
|
|
54
59
|
item.style.gridRowEnd = '';
|
|
55
60
|
});
|
|
56
61
|
}
|
package/kitten.gif
DELETED
|
Binary file
|