masonry-simple 1.4.2 → 2.0.0

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.
Files changed (10) hide show
  1. package/README.md +23 -17
  2. package/dist/index.js +41 -20
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.module.js +41 -20
  5. package/dist/index.module.js.map +1 -1
  6. package/package.json +7 -3
  7. package/src/index.js +77 -37
  8. package/src/images/960_1000.jpg +0 -0
  9. package/src/images/960_1360.jpg +0 -0
  10. package/src/images/960_640.jpg +0 -0
package/README.md CHANGED
@@ -7,8 +7,8 @@
7
7
  [![GitHub package version](https://img.shields.io/github/package-json/v/ux-ui-pro/masonry-simple.svg)](https://github.com/ux-ui-pro/masonry-simple)
8
8
  [![NPM Downloads](https://img.shields.io/npm/dm/masonry-simple.svg?style=flat)](https://www.npmjs.org/package/masonry-simple)
9
9
 
10
- <sup>500B gzipped</sup>
11
- <h3><a href="https://codepen.io/ux-ui/full/poxGEqX">Demo</a></h3>
10
+ <sup>600B gzipped</sup>
11
+ <h3><a href="https://l6nln6.csb.app/">Demo</a></h3>
12
12
 
13
13
  </div>
14
14
  <br>
@@ -27,29 +27,35 @@ import MasonrySimple from 'masonry-simple'
27
27
 
28
28
  ### Usage
29
29
  ```javascript
30
- const masonry = new MasonrySimple()
31
-
32
- masonry.options({
33
- container: '.masonry'
30
+ const masonry = MasonrySimple.init({
31
+ container: masonryRef.value
34
32
  })
35
33
  ```
36
34
  ```HTML
37
35
  <div class="masonry">
38
- <div class="masonry__item">
39
- ...
40
- </div>
41
- <div class="masonry__item">
42
- ...
43
- </div>
44
- ...
36
+ <div class="masonry__item">
37
+ ...
38
+ </div>
39
+ <div class="masonry__item">
40
+ ...
41
+ </div>
42
+ ...
45
43
  </div>
46
44
  ```
45
+ ```SCSS
46
+ .masonry {
47
+ display: grid;
48
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
49
+ grid-auto-flow: dense;
50
+ grid-gap: 10px;
51
+ }
52
+ ```
47
53
  <br>
48
54
 
49
- ### Settings
50
- | Arg | Default | Description |
51
- | --- | --- | --- |
52
- | `container` | `'.masonry'` | The HTML class of the element inside which the grid elements will be located. |
55
+ ### Destroy
56
+ ```javascript
57
+ masonry.destroy()
58
+ ```
53
59
  <br>
54
60
 
55
61
  ### License
package/dist/index.js CHANGED
@@ -8,35 +8,56 @@ function $parcel$export(e, n, v, s) {
8
8
  $parcel$defineInteropFlag(module.exports);
9
9
 
10
10
  $parcel$export(module.exports, "default", () => $4fa36e821943b400$export$2e2bcd8739ae039);
11
- class $4fa36e821943b400$export$2e2bcd8739ae039 {
11
+ class $4fa36e821943b400$var$MasonrySimple {
12
12
  constructor(){
13
13
  this.grid = null;
14
14
  this.gridItems = [];
15
15
  this.resizeObserver = null;
16
+ this.rowHeight = 1;
17
+ this.requestAnimationFrameId = null;
18
+ this.pendingResize = false;
16
19
  }
17
- options(options = {}) {
18
- const { container: container = ".masonry" } = options;
19
- this.grid = container instanceof HTMLElement ? container : document.querySelector(container);
20
- if (!this.grid) return;
21
- this.gridItems = Array.from(this.grid.children);
22
- this.grid.style.contain = "layout";
23
- this.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this));
24
- this.resizeObserver.observe(this.grid);
25
- this.resizeAllItems();
26
- }
27
- resizeItem(item, rowHeight, rowGap) {
28
- const rowSpan = Math.ceil((item.clientHeight + rowGap) / (rowHeight + rowGap));
29
- item.style.gridRowEnd = "span " + rowSpan;
20
+ resizeItem(item) {
21
+ const rowSpan = Math.ceil((item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap));
22
+ const newItem = item;
23
+ newItem.style.gridRowEnd = `span ${rowSpan}`;
30
24
  }
31
25
  resizeAllItems() {
32
- const rowHeight = 1;
33
- const rowGap = parseInt(window.getComputedStyle(this.grid).getPropertyValue("grid-row-gap"));
34
- this.grid.style.alignItems = "start";
35
- this.gridItems.forEach((item)=>this.resizeItem(item, rowHeight, rowGap));
36
- this.grid.style.alignItems = "stretch";
37
- this.gridItems.forEach((item)=>this.resizeItem(item, rowHeight, rowGap));
26
+ if (this.pendingResize) return;
27
+ this.pendingResize = true;
28
+ if (!this.requestAnimationFrameId) this.requestAnimationFrameId = requestAnimationFrame(()=>{
29
+ this.grid.style.alignItems = "start";
30
+ this.gridItems.forEach((item)=>this.resizeItem(item));
31
+ this.pendingResize = false;
32
+ this.requestAnimationFrameId = null;
33
+ });
34
+ }
35
+ static init(options = {}) {
36
+ const { container: container = ".masonry" } = options;
37
+ const masonry = new $4fa36e821943b400$var$MasonrySimple();
38
+ masonry.grid = container instanceof HTMLElement ? container : document.querySelector(container);
39
+ if (!masonry.grid) return;
40
+ masonry.gridItems = masonry.grid.children.length ? Array.from(masonry.grid.children) : [];
41
+ masonry.grid.style.contain = "layout";
42
+ masonry.rowGap = parseInt(window.getComputedStyle(masonry.grid).getPropertyValue("grid-row-gap"), 10);
43
+ masonry.resizeObserver = new ResizeObserver(masonry.resizeAllItems.bind(masonry));
44
+ masonry.resizeObserver.observe(masonry.grid);
45
+ masonry.resizeAllItems();
46
+ }
47
+ destroy() {
48
+ if (this.resizeObserver) {
49
+ this.resizeObserver.unobserve(this.grid);
50
+ this.resizeObserver = null;
51
+ }
52
+ this.grid.style.contain = "";
53
+ this.grid.style.alignItems = "";
54
+ this.gridItems.forEach((item)=>{
55
+ const newItem = item;
56
+ newItem.style.gridRowEnd = "";
57
+ });
38
58
  }
39
59
  }
60
+ var $4fa36e821943b400$export$2e2bcd8739ae039 = $4fa36e821943b400$var$MasonrySimple;
40
61
 
41
62
 
42
63
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;AAAe;IACd,aAAc;QACb,IAAI,CAAC,OAAO;QACZ,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,iBAAiB;IACvB;IAEA,QAAQ,UAAU,CAAC,CAAC,EAAE;QACrB,MAAM,aACL,YAAY,YACZ,GAAG;QAEJ,IAAI,CAAC,OAAO,qBAAqB,cAAc,YAAY,SAAS,cAAc;QAElF,IAAI,CAAC,IAAI,CAAC,MAAM;QAEhB,IAAI,CAAC,YAAY,MAAM,KAAK,IAAI,CAAC,KAAK;QACtC,IAAI,CAAC,KAAK,MAAM,UAAU;QAC1B,IAAI,CAAC,iBAAiB,IAAI,eAAe,IAAI,CAAC,eAAe,KAAK,IAAI;QACtE,IAAI,CAAC,eAAe,QAAQ,IAAI,CAAC;QACjC,IAAI,CAAC;IACN;IAEA,WAAW,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE;QACnC,MAAM,UAAU,KAAK,KAAK,AAAC,CAAA,KAAK,eAAe,MAAK,IAAM,CAAA,YAAY,MAAK;QAC3E,KAAK,MAAM,aAAa,UAAU;IACnC;IAEA,iBAAiB;QAChB,MAAM,YAAY;QAClB,MAAM,SAAS,SAAS,OAAO,iBAAiB,IAAI,CAAC,MAAM,iBAAiB;QAC5E,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAA,OAAQ,IAAI,CAAC,WAAW,MAAM,WAAW;QAChE,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAA,OAAQ,IAAI,CAAC,WAAW,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\r\n\t\tif (!this.grid) return\r\n\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"}
1
+ {"mappings":";;;;;;;;;;AAAA,MAAM;IACJ,aAAc;QACZ,IAAI,CAAC,OAAO;QACZ,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,iBAAiB;QACtB,IAAI,CAAC,YAAY;QACjB,IAAI,CAAC,0BAA0B;QAC/B,IAAI,CAAC,gBAAgB;IACvB;IAEA,WAAW,IAAI,EAAE;QACf,MAAM,UAAU,KAAK,KACnB,AAAC,CAAA,KAAK,eAAe,IAAI,CAAC,MAAK,IAAM,CAAA,IAAI,CAAC,YAAY,IAAI,CAAC,MAAK;QAGlE,MAAM,UAAU;QAEhB,QAAQ,MAAM,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC;IAC9C;IAEA,iBAAiB;QACf,IAAI,IAAI,CAAC,eAAe;QAExB,IAAI,CAAC,gBAAgB;QAErB,IAAI,CAAC,IAAI,CAAC,yBACR,IAAI,CAAC,0BAA0B,sBAAsB;YACnD,IAAI,CAAC,KAAK,MAAM,aAAa;YAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC,OAAS,IAAI,CAAC,WAAW;YACjD,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,0BAA0B;QACjC;IAEJ;IAEA,OAAO,KAAK,UAAU,CAAC,CAAC,EAAE;QACxB,MAAM,aAAE,YAAY,YAAY,GAAG;QACnC,MAAM,UAAU,IAAI;QAEpB,QAAQ,OAAO,qBAAqB,cAAc,YAAY,SAAS,cAAc;QAErF,IAAI,CAAC,QAAQ,MAAM;QAEnB,QAAQ,YAAY,QAAQ,KAAK,SAAS,SACtC,MAAM,KAAK,QAAQ,KAAK,YACxB,EAAE;QACN,QAAQ,KAAK,MAAM,UAAU;QAE7B,QAAQ,SAAS,SACf,OAAO,iBAAiB,QAAQ,MAAM,iBAAiB,iBACvD;QAGF,QAAQ,iBAAiB,IAAI,eAC3B,QAAQ,eAAe,KAAK;QAG9B,QAAQ,eAAe,QAAQ,QAAQ;QACvC,QAAQ;IACV;IAEA,UAAU;QACR,IAAI,IAAI,CAAC,gBAAgB;YACvB,IAAI,CAAC,eAAe,UAAU,IAAI,CAAC;YACnC,IAAI,CAAC,iBAAiB;QACxB;QAEA,IAAI,CAAC,KAAK,MAAM,UAAU;QAC1B,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC;YACtB,MAAM,UAAU;YAChB,QAAQ,MAAM,aAAa;QAC7B;IACF;AACF;IAEA,2CAAe","sources":["src/index.js"],"sourcesContent":["class MasonrySimple {\n constructor() {\n this.grid = null;\n this.gridItems = [];\n this.resizeObserver = null;\n this.rowHeight = 1;\n this.requestAnimationFrameId = null;\n this.pendingResize = false;\n }\n\n resizeItem(item) {\n const rowSpan = Math.ceil(\n (item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap),\n );\n\n const newItem = item;\n\n newItem.style.gridRowEnd = `span ${rowSpan}`;\n }\n\n resizeAllItems() {\n if (this.pendingResize) return;\n\n this.pendingResize = true;\n\n if (!this.requestAnimationFrameId) {\n this.requestAnimationFrameId = requestAnimationFrame(() => {\n this.grid.style.alignItems = 'start';\n this.gridItems.forEach((item) => this.resizeItem(item));\n this.pendingResize = false;\n this.requestAnimationFrameId = null;\n });\n }\n }\n\n static init(options = {}) {\n const { container = '.masonry' } = options;\n const masonry = new MasonrySimple();\n\n masonry.grid = container instanceof HTMLElement ? container : document.querySelector(container);\n\n if (!masonry.grid) return;\n\n masonry.gridItems = masonry.grid.children.length\n ? Array.from(masonry.grid.children)\n : [];\n masonry.grid.style.contain = 'layout';\n\n masonry.rowGap = parseInt(\n window.getComputedStyle(masonry.grid).getPropertyValue('grid-row-gap'),\n 10,\n );\n\n masonry.resizeObserver = new ResizeObserver(\n masonry.resizeAllItems.bind(masonry),\n );\n\n masonry.resizeObserver.observe(masonry.grid);\n masonry.resizeAllItems();\n }\n\n destroy() {\n if (this.resizeObserver) {\n this.resizeObserver.unobserve(this.grid);\n this.resizeObserver = null;\n }\n\n this.grid.style.contain = '';\n this.grid.style.alignItems = '';\n this.gridItems.forEach((item) => {\n const newItem = item;\n newItem.style.gridRowEnd = '';\n });\n }\n}\n\nexport default MasonrySimple;\n"],"names":[],"version":3,"file":"index.js.map"}
package/dist/index.module.js CHANGED
@@ -1,32 +1,53 @@
1
- class $cf838c15c8b009ba$export$2e2bcd8739ae039 {
1
+ class $cf838c15c8b009ba$var$MasonrySimple {
2
2
  constructor(){
3
3
  this.grid = null;
4
4
  this.gridItems = [];
5
5
  this.resizeObserver = null;
6
+ this.rowHeight = 1;
7
+ this.requestAnimationFrameId = null;
8
+ this.pendingResize = false;
6
9
  }
7
- options(options = {}) {
8
- const { container: container = ".masonry" } = options;
9
- this.grid = container instanceof HTMLElement ? container : document.querySelector(container);
10
- if (!this.grid) return;
11
- this.gridItems = Array.from(this.grid.children);
12
- this.grid.style.contain = "layout";
13
- this.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this));
14
- this.resizeObserver.observe(this.grid);
15
- this.resizeAllItems();
16
- }
17
- resizeItem(item, rowHeight, rowGap) {
18
- const rowSpan = Math.ceil((item.clientHeight + rowGap) / (rowHeight + rowGap));
19
- item.style.gridRowEnd = "span " + rowSpan;
10
+ resizeItem(item) {
11
+ const rowSpan = Math.ceil((item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap));
12
+ const newItem = item;
13
+ newItem.style.gridRowEnd = `span ${rowSpan}`;
20
14
  }
21
15
  resizeAllItems() {
22
- const rowHeight = 1;
23
- const rowGap = parseInt(window.getComputedStyle(this.grid).getPropertyValue("grid-row-gap"));
24
- this.grid.style.alignItems = "start";
25
- this.gridItems.forEach((item)=>this.resizeItem(item, rowHeight, rowGap));
26
- this.grid.style.alignItems = "stretch";
27
- this.gridItems.forEach((item)=>this.resizeItem(item, rowHeight, rowGap));
16
+ if (this.pendingResize) return;
17
+ this.pendingResize = true;
18
+ if (!this.requestAnimationFrameId) this.requestAnimationFrameId = requestAnimationFrame(()=>{
19
+ this.grid.style.alignItems = "start";
20
+ this.gridItems.forEach((item)=>this.resizeItem(item));
21
+ this.pendingResize = false;
22
+ this.requestAnimationFrameId = null;
23
+ });
24
+ }
25
+ static init(options = {}) {
26
+ const { container: container = ".masonry" } = options;
27
+ const masonry = new $cf838c15c8b009ba$var$MasonrySimple();
28
+ masonry.grid = container instanceof HTMLElement ? container : document.querySelector(container);
29
+ if (!masonry.grid) return;
30
+ masonry.gridItems = masonry.grid.children.length ? Array.from(masonry.grid.children) : [];
31
+ masonry.grid.style.contain = "layout";
32
+ masonry.rowGap = parseInt(window.getComputedStyle(masonry.grid).getPropertyValue("grid-row-gap"), 10);
33
+ masonry.resizeObserver = new ResizeObserver(masonry.resizeAllItems.bind(masonry));
34
+ masonry.resizeObserver.observe(masonry.grid);
35
+ masonry.resizeAllItems();
36
+ }
37
+ destroy() {
38
+ if (this.resizeObserver) {
39
+ this.resizeObserver.unobserve(this.grid);
40
+ this.resizeObserver = null;
41
+ }
42
+ this.grid.style.contain = "";
43
+ this.grid.style.alignItems = "";
44
+ this.gridItems.forEach((item)=>{
45
+ const newItem = item;
46
+ newItem.style.gridRowEnd = "";
47
+ });
28
48
  }
29
49
  }
50
+ var $cf838c15c8b009ba$export$2e2bcd8739ae039 = $cf838c15c8b009ba$var$MasonrySimple;
30
51
 
31
52
 
32
53
  export {$cf838c15c8b009ba$export$2e2bcd8739ae039 as default};
package/dist/index.module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"AAAe;IACd,aAAc;QACb,IAAI,CAAC,OAAO;QACZ,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,iBAAiB;IACvB;IAEA,QAAQ,UAAU,CAAC,CAAC,EAAE;QACrB,MAAM,aACL,YAAY,YACZ,GAAG;QAEJ,IAAI,CAAC,OAAO,qBAAqB,cAAc,YAAY,SAAS,cAAc;QAElF,IAAI,CAAC,IAAI,CAAC,MAAM;QAEhB,IAAI,CAAC,YAAY,MAAM,KAAK,IAAI,CAAC,KAAK;QACtC,IAAI,CAAC,KAAK,MAAM,UAAU;QAC1B,IAAI,CAAC,iBAAiB,IAAI,eAAe,IAAI,CAAC,eAAe,KAAK,IAAI;QACtE,IAAI,CAAC,eAAe,QAAQ,IAAI,CAAC;QACjC,IAAI,CAAC;IACN;IAEA,WAAW,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE;QACnC,MAAM,UAAU,KAAK,KAAK,AAAC,CAAA,KAAK,eAAe,MAAK,IAAM,CAAA,YAAY,MAAK;QAC3E,KAAK,MAAM,aAAa,UAAU;IACnC;IAEA,iBAAiB;QAChB,MAAM,YAAY;QAClB,MAAM,SAAS,SAAS,OAAO,iBAAiB,IAAI,CAAC,MAAM,iBAAiB;QAC5E,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAA,OAAQ,IAAI,CAAC,WAAW,MAAM,WAAW;QAChE,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAA,OAAQ,IAAI,CAAC,WAAW,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\r\n\t\tif (!this.grid) return\r\n\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"}
1
+ {"mappings":"AAAA,MAAM;IACJ,aAAc;QACZ,IAAI,CAAC,OAAO;QACZ,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,iBAAiB;QACtB,IAAI,CAAC,YAAY;QACjB,IAAI,CAAC,0BAA0B;QAC/B,IAAI,CAAC,gBAAgB;IACvB;IAEA,WAAW,IAAI,EAAE;QACf,MAAM,UAAU,KAAK,KACnB,AAAC,CAAA,KAAK,eAAe,IAAI,CAAC,MAAK,IAAM,CAAA,IAAI,CAAC,YAAY,IAAI,CAAC,MAAK;QAGlE,MAAM,UAAU;QAEhB,QAAQ,MAAM,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC;IAC9C;IAEA,iBAAiB;QACf,IAAI,IAAI,CAAC,eAAe;QAExB,IAAI,CAAC,gBAAgB;QAErB,IAAI,CAAC,IAAI,CAAC,yBACR,IAAI,CAAC,0BAA0B,sBAAsB;YACnD,IAAI,CAAC,KAAK,MAAM,aAAa;YAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC,OAAS,IAAI,CAAC,WAAW;YACjD,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,0BAA0B;QACjC;IAEJ;IAEA,OAAO,KAAK,UAAU,CAAC,CAAC,EAAE;QACxB,MAAM,aAAE,YAAY,YAAY,GAAG;QACnC,MAAM,UAAU,IAAI;QAEpB,QAAQ,OAAO,qBAAqB,cAAc,YAAY,SAAS,cAAc;QAErF,IAAI,CAAC,QAAQ,MAAM;QAEnB,QAAQ,YAAY,QAAQ,KAAK,SAAS,SACtC,MAAM,KAAK,QAAQ,KAAK,YACxB,EAAE;QACN,QAAQ,KAAK,MAAM,UAAU;QAE7B,QAAQ,SAAS,SACf,OAAO,iBAAiB,QAAQ,MAAM,iBAAiB,iBACvD;QAGF,QAAQ,iBAAiB,IAAI,eAC3B,QAAQ,eAAe,KAAK;QAG9B,QAAQ,eAAe,QAAQ,QAAQ;QACvC,QAAQ;IACV;IAEA,UAAU;QACR,IAAI,IAAI,CAAC,gBAAgB;YACvB,IAAI,CAAC,eAAe,UAAU,IAAI,CAAC;YACnC,IAAI,CAAC,iBAAiB;QACxB;QAEA,IAAI,CAAC,KAAK,MAAM,UAAU;QAC1B,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC;YACtB,MAAM,UAAU;YAChB,QAAQ,MAAM,aAAa;QAC7B;IACF;AACF;IAEA,2CAAe","sources":["src/index.js"],"sourcesContent":["class MasonrySimple {\n constructor() {\n this.grid = null;\n this.gridItems = [];\n this.resizeObserver = null;\n this.rowHeight = 1;\n this.requestAnimationFrameId = null;\n this.pendingResize = false;\n }\n\n resizeItem(item) {\n const rowSpan = Math.ceil(\n (item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap),\n );\n\n const newItem = item;\n\n newItem.style.gridRowEnd = `span ${rowSpan}`;\n }\n\n resizeAllItems() {\n if (this.pendingResize) return;\n\n this.pendingResize = true;\n\n if (!this.requestAnimationFrameId) {\n this.requestAnimationFrameId = requestAnimationFrame(() => {\n this.grid.style.alignItems = 'start';\n this.gridItems.forEach((item) => this.resizeItem(item));\n this.pendingResize = false;\n this.requestAnimationFrameId = null;\n });\n }\n }\n\n static init(options = {}) {\n const { container = '.masonry' } = options;\n const masonry = new MasonrySimple();\n\n masonry.grid = container instanceof HTMLElement ? container : document.querySelector(container);\n\n if (!masonry.grid) return;\n\n masonry.gridItems = masonry.grid.children.length\n ? Array.from(masonry.grid.children)\n : [];\n masonry.grid.style.contain = 'layout';\n\n masonry.rowGap = parseInt(\n window.getComputedStyle(masonry.grid).getPropertyValue('grid-row-gap'),\n 10,\n );\n\n masonry.resizeObserver = new ResizeObserver(\n masonry.resizeAllItems.bind(masonry),\n );\n\n masonry.resizeObserver.observe(masonry.grid);\n masonry.resizeAllItems();\n }\n\n destroy() {\n if (this.resizeObserver) {\n this.resizeObserver.unobserve(this.grid);\n this.resizeObserver = null;\n }\n\n this.grid.style.contain = '';\n this.grid.style.alignItems = '';\n this.gridItems.forEach((item) => {\n const newItem = item;\n newItem.style.gridRowEnd = '';\n });\n }\n}\n\nexport default MasonrySimple;\n"],"names":[],"version":3,"file":"index.module.js.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "masonry-simple",
3
- "version": "1.4.2",
3
+ "version": "2.0.0",
4
4
  "description": "Responsive masonry grid",
5
5
  "author": "ux-ui.pro",
6
6
  "license": "MIT",
@@ -17,9 +17,13 @@
17
17
  "scripts": {
18
18
  "serve": "parcel watch",
19
19
  "build": "parcel build",
20
- "clean": "rm -rf dist .parcel-cache"
20
+ "clean": "rm -rf dist .parcel-cache",
21
+ "lint": "eslint --ext .js,.vue --report-unused-disable-directives ."
21
22
  },
22
23
  "devDependencies": {
24
+ "eslint": "^7.32.0 || ^8.2.0",
25
+ "eslint-config-airbnb-base": "^15.0.0",
26
+ "eslint-plugin-import": "^2.25.2",
23
27
  "parcel": "~2.9.3"
24
28
  },
25
29
  "keywords": [
@@ -29,4 +33,4 @@
29
33
  "gallery",
30
34
  "images"
31
35
  ]
32
- }
36
+ }
package/src/index.js CHANGED
@@ -1,37 +1,77 @@
1
- export default class MasonrySimple {
2
- constructor() {
3
- this.grid = null
4
- this.gridItems = []
5
- this.resizeObserver = null
6
- }
7
-
8
- options(options = {}) {
9
- const {
10
- container = '.masonry',
11
- } = options
12
-
13
- this.grid = container instanceof HTMLElement ? container : document.querySelector(container)
14
-
15
- if (!this.grid) return
16
-
17
- this.gridItems = Array.from(this.grid.children)
18
- this.grid.style.contain = 'layout'
19
- this.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this))
20
- this.resizeObserver.observe(this.grid)
21
- this.resizeAllItems()
22
- }
23
-
24
- resizeItem(item, rowHeight, rowGap) {
25
- const rowSpan = Math.ceil((item.clientHeight + rowGap) / (rowHeight + rowGap))
26
- item.style.gridRowEnd = 'span ' + rowSpan
27
- }
28
-
29
- resizeAllItems() {
30
- const rowHeight = 1
31
- const rowGap = parseInt(window.getComputedStyle(this.grid).getPropertyValue('grid-row-gap'))
32
- this.grid.style.alignItems = 'start'
33
- this.gridItems.forEach(item => this.resizeItem(item, rowHeight, rowGap))
34
- this.grid.style.alignItems = 'stretch'
35
- this.gridItems.forEach(item => this.resizeItem(item, rowHeight, rowGap))
36
- }
37
- }
1
+ class MasonrySimple {
2
+ constructor() {
3
+ this.grid = null;
4
+ this.gridItems = [];
5
+ this.resizeObserver = null;
6
+ this.rowHeight = 1;
7
+ this.requestAnimationFrameId = null;
8
+ this.pendingResize = false;
9
+ }
10
+
11
+ resizeItem(item) {
12
+ const rowSpan = Math.ceil(
13
+ (item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap),
14
+ );
15
+
16
+ const newItem = item;
17
+
18
+ newItem.style.gridRowEnd = `span ${rowSpan}`;
19
+ }
20
+
21
+ resizeAllItems() {
22
+ if (this.pendingResize) return;
23
+
24
+ this.pendingResize = true;
25
+
26
+ if (!this.requestAnimationFrameId) {
27
+ this.requestAnimationFrameId = requestAnimationFrame(() => {
28
+ this.grid.style.alignItems = 'start';
29
+ this.gridItems.forEach((item) => this.resizeItem(item));
30
+ this.pendingResize = false;
31
+ this.requestAnimationFrameId = null;
32
+ });
33
+ }
34
+ }
35
+
36
+ static init(options = {}) {
37
+ const { container = '.masonry' } = options;
38
+ const masonry = new MasonrySimple();
39
+
40
+ masonry.grid = container instanceof HTMLElement ? container : document.querySelector(container);
41
+
42
+ if (!masonry.grid) return;
43
+
44
+ masonry.gridItems = masonry.grid.children.length
45
+ ? Array.from(masonry.grid.children)
46
+ : [];
47
+ masonry.grid.style.contain = 'layout';
48
+
49
+ masonry.rowGap = parseInt(
50
+ window.getComputedStyle(masonry.grid).getPropertyValue('grid-row-gap'),
51
+ 10,
52
+ );
53
+
54
+ masonry.resizeObserver = new ResizeObserver(
55
+ masonry.resizeAllItems.bind(masonry),
56
+ );
57
+
58
+ masonry.resizeObserver.observe(masonry.grid);
59
+ masonry.resizeAllItems();
60
+ }
61
+
62
+ destroy() {
63
+ if (this.resizeObserver) {
64
+ this.resizeObserver.unobserve(this.grid);
65
+ this.resizeObserver = null;
66
+ }
67
+
68
+ this.grid.style.contain = '';
69
+ this.grid.style.alignItems = '';
70
+ this.gridItems.forEach((item) => {
71
+ const newItem = item;
72
+ newItem.style.gridRowEnd = '';
73
+ });
74
+ }
75
+ }
76
+
77
+ export default MasonrySimple;
package/src/images/960_1000.jpg DELETED
Binary file
package/src/images/960_1360.jpg DELETED
Binary file
package/src/images/960_640.jpg DELETED
Binary file