masonry-simple 1.5.0 → 2.0.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.
Files changed (10) hide show
  1. package/README.md +14 -14
  2. package/dist/index.js +32 -19
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.module.js +32 -19
  5. package/dist/index.module.js.map +1 -1
  6. package/package.json +7 -3
  7. package/src/index.js +80 -61
  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
@@ -27,34 +27,34 @@ import MasonrySimple from 'masonry-simple'
27
27
 
28
28
  ### Usage
29
29
  ```javascript
30
- const masonrySimple = new MasonrySimple({
31
- container: '.masonry'
30
+ const masonry = MasonrySimple.init({
31
+ container: '.masonry'
32
32
  })
33
33
  ```
34
34
  ```HTML
35
35
  <div class="masonry">
36
- <div class="masonry__item">
37
- ...
38
- </div>
39
- <div class="masonry__item">
40
- ...
41
- </div>
42
- ...
36
+ <div class="masonry__item">
37
+ ...
38
+ </div>
39
+ <div class="masonry__item">
40
+ ...
41
+ </div>
42
+ ...
43
43
  </div>
44
44
  ```
45
45
  ```SCSS
46
46
  .masonry {
47
- display: grid;
48
- grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
49
- grid-auto-flow: dense;
50
- grid-gap: 10px;
47
+ display: grid;
48
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
49
+ grid-auto-flow: dense;
50
+ grid-gap: 10px;
51
51
  }
52
52
  ```
53
53
  <br>
54
54
 
55
55
  ### Destroy
56
56
  ```javascript
57
- masonrySimple.destroy()
57
+ masonry.destroy()
58
58
  ```
59
59
  <br>
60
60
 
package/dist/index.js CHANGED
@@ -8,30 +8,41 @@ 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 {
12
- constructor(options = {}){
13
- const { container: container = ".masonry" } = options;
11
+ class $4fa36e821943b400$var$MasonrySimple {
12
+ constructor(){
14
13
  this.grid = null;
15
14
  this.gridItems = [];
16
15
  this.resizeObserver = null;
17
- this.container = container;
18
- this.grid = this.container instanceof HTMLElement ? this.container : document.querySelector(this.container);
19
- if (!this.grid) return;
20
- this.gridItems = this.grid.children.length ? Array.from(this.grid.children) : [];
21
- this.grid.style.contain = "layout";
22
- this.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this));
23
- this.resizeObserver.observe(this.grid);
24
- this.resizeAllItems();
16
+ this.rowHeight = 1;
17
+ this.requestAnimationFrameId = null;
18
+ this.pendingResize = false;
25
19
  }
26
- resizeItem(item, rowHeight, rowGap) {
27
- const rowSpan = Math.ceil((item.clientHeight + rowGap) / (rowHeight + rowGap));
28
- 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}`;
29
24
  }
30
25
  resizeAllItems() {
31
- const rowHeight = 1;
32
- const rowGap = parseInt(window.getComputedStyle(this.grid).getPropertyValue("grid-row-gap"), 10);
33
- this.grid.style.alignItems = "start";
34
- 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();
35
46
  }
36
47
  destroy() {
37
48
  if (this.resizeObserver) {
@@ -41,10 +52,12 @@ class $4fa36e821943b400$export$2e2bcd8739ae039 {
41
52
  this.grid.style.contain = "";
42
53
  this.grid.style.alignItems = "";
43
54
  this.gridItems.forEach((item)=>{
44
- item.style.gridRowEnd = "";
55
+ const newItem = item;
56
+ newItem.style.gridRowEnd = "";
45
57
  });
46
58
  }
47
59
  }
60
+ var $4fa36e821943b400$export$2e2bcd8739ae039 = $4fa36e821943b400$var$MasonrySimple;
48
61
 
49
62
 
50
63
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;AAAe;IACd,YAAY,UAAU,CAAC,CAAC,CAAE;QACzB,MAAM,aAAE,YAAY,YAAY,GAAG;QAEnC,IAAI,CAAC,OAAO;QACZ,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,iBAAiB;QACtB,IAAI,CAAC,YAAY;QACjB,IAAI,CAAC,OACJ,IAAI,CAAC,qBAAqB,cACvB,IAAI,CAAC,YACL,SAAS,cAAc,IAAI,CAAC;QAEhC,IAAI,CAAC,IAAI,CAAC,MAAM;QAEhB,IAAI,CAAC,YAAY,IAAI,CAAC,KAAK,SAAS,SACjC,MAAM,KAAK,IAAI,CAAC,KAAK,YACrB,EAAE;QACL,IAAI,CAAC,KAAK,MAAM,UAAU;QAC1B,IAAI,CAAC,iBAAiB,IAAI,eACzB,IAAI,CAAC,eAAe,KAAK,IAAI;QAE9B,IAAI,CAAC,eAAe,QAAQ,IAAI,CAAC;QAEjC,IAAI,CAAC;IACN;IAEA,WAAW,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE;QACnC,MAAM,UAAU,KAAK,KACpB,AAAC,CAAA,KAAK,eAAe,MAAK,IAAM,CAAA,YAAY,MAAK;QAGlD,KAAK,MAAM,aAAa,UAAU;IACnC;IAEA,iBAAiB;QAChB,MAAM,YAAY;QAClB,MAAM,SAAS,SACd,OAAO,iBAAiB,IAAI,CAAC,MAAM,iBAAiB,iBACpD;QAGD,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC,OACvB,IAAI,CAAC,WAAW,MAAM,WAAW;IAEnC;IAEA,UAAU;QACT,IAAI,IAAI,CAAC,gBAAgB;YACxB,IAAI,CAAC,eAAe,UAAU,IAAI,CAAC;YACnC,IAAI,CAAC,iBAAiB;QACvB;QAEA,IAAI,CAAC,KAAK,MAAM,UAAU;QAC1B,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC;YACvB,KAAK,MAAM,aAAa;QACzB;IACD;AACD","sources":["src/index.js"],"sourcesContent":["export default class MasonrySimple {\r\n\tconstructor(options = {}) {\r\n\t\tconst { container = '.masonry' } = options\r\n\r\n\t\tthis.grid = null\r\n\t\tthis.gridItems = []\r\n\t\tthis.resizeObserver = null\r\n\t\tthis.container = container\r\n\t\tthis.grid =\r\n\t\t\tthis.container instanceof HTMLElement\r\n\t\t\t\t? this.container\r\n\t\t\t\t: document.querySelector(this.container)\r\n\r\n\t\tif (!this.grid) return\r\n\r\n\t\tthis.gridItems = this.grid.children.length\r\n\t\t\t? Array.from(this.grid.children)\r\n\t\t\t: []\r\n\t\tthis.grid.style.contain = 'layout'\r\n\t\tthis.resizeObserver = new ResizeObserver(\r\n\t\t\tthis.resizeAllItems.bind(this)\r\n\t\t)\r\n\t\tthis.resizeObserver.observe(this.grid)\r\n\r\n\t\tthis.resizeAllItems()\r\n\t}\r\n\r\n\tresizeItem(item, rowHeight, rowGap) {\r\n\t\tconst rowSpan = Math.ceil(\r\n\t\t\t(item.clientHeight + rowGap) / (rowHeight + rowGap)\r\n\t\t)\r\n\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(\r\n\t\t\twindow.getComputedStyle(this.grid).getPropertyValue('grid-row-gap'),\r\n\t\t\t10\r\n\t\t)\r\n\r\n\t\tthis.grid.style.alignItems = 'start'\r\n\t\tthis.gridItems.forEach((item) =>\r\n\t\t\tthis.resizeItem(item, rowHeight, rowGap)\r\n\t\t)\r\n\t}\r\n\r\n\tdestroy() {\r\n\t\tif (this.resizeObserver) {\r\n\t\t\tthis.resizeObserver.unobserve(this.grid)\r\n\t\t\tthis.resizeObserver = null\r\n\t\t}\r\n\r\n\t\tthis.grid.style.contain = ''\r\n\t\tthis.grid.style.alignItems = ''\r\n\t\tthis.gridItems.forEach((item) => {\r\n\t\t\titem.style.gridRowEnd = ''\r\n\t\t})\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;QAChB,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,OACN,qBAAqB,cACjB,YACA,SAAS,cAAc;QAE7B,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;YAEhB,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 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 =\n container instanceof HTMLElement\n ? container\n : 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\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,27 +1,38 @@
1
- class $cf838c15c8b009ba$export$2e2bcd8739ae039 {
2
- constructor(options = {}){
3
- const { container: container = ".masonry" } = options;
1
+ class $cf838c15c8b009ba$var$MasonrySimple {
2
+ constructor(){
4
3
  this.grid = null;
5
4
  this.gridItems = [];
6
5
  this.resizeObserver = null;
7
- this.container = container;
8
- this.grid = this.container instanceof HTMLElement ? this.container : document.querySelector(this.container);
9
- if (!this.grid) return;
10
- this.gridItems = this.grid.children.length ? Array.from(this.grid.children) : [];
11
- this.grid.style.contain = "layout";
12
- this.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this));
13
- this.resizeObserver.observe(this.grid);
14
- this.resizeAllItems();
6
+ this.rowHeight = 1;
7
+ this.requestAnimationFrameId = null;
8
+ this.pendingResize = false;
15
9
  }
16
- resizeItem(item, rowHeight, rowGap) {
17
- const rowSpan = Math.ceil((item.clientHeight + rowGap) / (rowHeight + rowGap));
18
- 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}`;
19
14
  }
20
15
  resizeAllItems() {
21
- const rowHeight = 1;
22
- const rowGap = parseInt(window.getComputedStyle(this.grid).getPropertyValue("grid-row-gap"), 10);
23
- this.grid.style.alignItems = "start";
24
- 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();
25
36
  }
26
37
  destroy() {
27
38
  if (this.resizeObserver) {
@@ -31,10 +42,12 @@ class $cf838c15c8b009ba$export$2e2bcd8739ae039 {
31
42
  this.grid.style.contain = "";
32
43
  this.grid.style.alignItems = "";
33
44
  this.gridItems.forEach((item)=>{
34
- item.style.gridRowEnd = "";
45
+ const newItem = item;
46
+ newItem.style.gridRowEnd = "";
35
47
  });
36
48
  }
37
49
  }
50
+ var $cf838c15c8b009ba$export$2e2bcd8739ae039 = $cf838c15c8b009ba$var$MasonrySimple;
38
51
 
39
52
 
40
53
  export {$cf838c15c8b009ba$export$2e2bcd8739ae039 as default};
package/dist/index.module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"AAAe;IACd,YAAY,UAAU,CAAC,CAAC,CAAE;QACzB,MAAM,aAAE,YAAY,YAAY,GAAG;QAEnC,IAAI,CAAC,OAAO;QACZ,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,iBAAiB;QACtB,IAAI,CAAC,YAAY;QACjB,IAAI,CAAC,OACJ,IAAI,CAAC,qBAAqB,cACvB,IAAI,CAAC,YACL,SAAS,cAAc,IAAI,CAAC;QAEhC,IAAI,CAAC,IAAI,CAAC,MAAM;QAEhB,IAAI,CAAC,YAAY,IAAI,CAAC,KAAK,SAAS,SACjC,MAAM,KAAK,IAAI,CAAC,KAAK,YACrB,EAAE;QACL,IAAI,CAAC,KAAK,MAAM,UAAU;QAC1B,IAAI,CAAC,iBAAiB,IAAI,eACzB,IAAI,CAAC,eAAe,KAAK,IAAI;QAE9B,IAAI,CAAC,eAAe,QAAQ,IAAI,CAAC;QAEjC,IAAI,CAAC;IACN;IAEA,WAAW,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE;QACnC,MAAM,UAAU,KAAK,KACpB,AAAC,CAAA,KAAK,eAAe,MAAK,IAAM,CAAA,YAAY,MAAK;QAGlD,KAAK,MAAM,aAAa,UAAU;IACnC;IAEA,iBAAiB;QAChB,MAAM,YAAY;QAClB,MAAM,SAAS,SACd,OAAO,iBAAiB,IAAI,CAAC,MAAM,iBAAiB,iBACpD;QAGD,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC,OACvB,IAAI,CAAC,WAAW,MAAM,WAAW;IAEnC;IAEA,UAAU;QACT,IAAI,IAAI,CAAC,gBAAgB;YACxB,IAAI,CAAC,eAAe,UAAU,IAAI,CAAC;YACnC,IAAI,CAAC,iBAAiB;QACvB;QAEA,IAAI,CAAC,KAAK,MAAM,UAAU;QAC1B,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC;YACvB,KAAK,MAAM,aAAa;QACzB;IACD;AACD","sources":["src/index.js"],"sourcesContent":["export default class MasonrySimple {\r\n\tconstructor(options = {}) {\r\n\t\tconst { container = '.masonry' } = options\r\n\r\n\t\tthis.grid = null\r\n\t\tthis.gridItems = []\r\n\t\tthis.resizeObserver = null\r\n\t\tthis.container = container\r\n\t\tthis.grid =\r\n\t\t\tthis.container instanceof HTMLElement\r\n\t\t\t\t? this.container\r\n\t\t\t\t: document.querySelector(this.container)\r\n\r\n\t\tif (!this.grid) return\r\n\r\n\t\tthis.gridItems = this.grid.children.length\r\n\t\t\t? Array.from(this.grid.children)\r\n\t\t\t: []\r\n\t\tthis.grid.style.contain = 'layout'\r\n\t\tthis.resizeObserver = new ResizeObserver(\r\n\t\t\tthis.resizeAllItems.bind(this)\r\n\t\t)\r\n\t\tthis.resizeObserver.observe(this.grid)\r\n\r\n\t\tthis.resizeAllItems()\r\n\t}\r\n\r\n\tresizeItem(item, rowHeight, rowGap) {\r\n\t\tconst rowSpan = Math.ceil(\r\n\t\t\t(item.clientHeight + rowGap) / (rowHeight + rowGap)\r\n\t\t)\r\n\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(\r\n\t\t\twindow.getComputedStyle(this.grid).getPropertyValue('grid-row-gap'),\r\n\t\t\t10\r\n\t\t)\r\n\r\n\t\tthis.grid.style.alignItems = 'start'\r\n\t\tthis.gridItems.forEach((item) =>\r\n\t\t\tthis.resizeItem(item, rowHeight, rowGap)\r\n\t\t)\r\n\t}\r\n\r\n\tdestroy() {\r\n\t\tif (this.resizeObserver) {\r\n\t\t\tthis.resizeObserver.unobserve(this.grid)\r\n\t\t\tthis.resizeObserver = null\r\n\t\t}\r\n\r\n\t\tthis.grid.style.contain = ''\r\n\t\tthis.grid.style.alignItems = ''\r\n\t\tthis.gridItems.forEach((item) => {\r\n\t\t\titem.style.gridRowEnd = ''\r\n\t\t})\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;QAChB,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,OACN,qBAAqB,cACjB,YACA,SAAS,cAAc;QAE7B,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;YAEhB,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 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 =\n container instanceof HTMLElement\n ? container\n : 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\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.5.0",
3
+ "version": "2.0.1",
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,61 +1,80 @@
1
- export default class MasonrySimple {
2
- constructor(options = {}) {
3
- const { container = '.masonry' } = options
4
-
5
- this.grid = null
6
- this.gridItems = []
7
- this.resizeObserver = null
8
- this.container = container
9
- this.grid =
10
- this.container instanceof HTMLElement
11
- ? this.container
12
- : document.querySelector(this.container)
13
-
14
- if (!this.grid) return
15
-
16
- this.gridItems = this.grid.children.length
17
- ? Array.from(this.grid.children)
18
- : []
19
- this.grid.style.contain = 'layout'
20
- this.resizeObserver = new ResizeObserver(
21
- this.resizeAllItems.bind(this)
22
- )
23
- this.resizeObserver.observe(this.grid)
24
-
25
- this.resizeAllItems()
26
- }
27
-
28
- resizeItem(item, rowHeight, rowGap) {
29
- const rowSpan = Math.ceil(
30
- (item.clientHeight + rowGap) / (rowHeight + rowGap)
31
- )
32
-
33
- item.style.gridRowEnd = 'span ' + rowSpan
34
- }
35
-
36
- resizeAllItems() {
37
- const rowHeight = 1
38
- const rowGap = parseInt(
39
- window.getComputedStyle(this.grid).getPropertyValue('grid-row-gap'),
40
- 10
41
- )
42
-
43
- this.grid.style.alignItems = 'start'
44
- this.gridItems.forEach((item) =>
45
- this.resizeItem(item, rowHeight, rowGap)
46
- )
47
- }
48
-
49
- destroy() {
50
- if (this.resizeObserver) {
51
- this.resizeObserver.unobserve(this.grid)
52
- this.resizeObserver = null
53
- }
54
-
55
- this.grid.style.contain = ''
56
- this.grid.style.alignItems = ''
57
- this.gridItems.forEach((item) => {
58
- item.style.gridRowEnd = ''
59
- })
60
- }
61
- }
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
+ newItem.style.gridRowEnd = `span ${rowSpan}`;
18
+ }
19
+
20
+ resizeAllItems() {
21
+ if (this.pendingResize) return;
22
+
23
+ this.pendingResize = true;
24
+
25
+ if (!this.requestAnimationFrameId) {
26
+ this.requestAnimationFrameId = requestAnimationFrame(() => {
27
+ this.grid.style.alignItems = "start";
28
+ this.gridItems.forEach((item) => this.resizeItem(item));
29
+ this.pendingResize = false;
30
+ this.requestAnimationFrameId = null;
31
+ });
32
+ }
33
+ }
34
+
35
+ static init(options = {}) {
36
+ const { container = ".masonry" } = options;
37
+ const masonry = new MasonrySimple();
38
+
39
+ masonry.grid =
40
+ container instanceof HTMLElement
41
+ ? container
42
+ : document.querySelector(container);
43
+
44
+ if (!masonry.grid) return;
45
+
46
+ masonry.gridItems = masonry.grid.children.length
47
+ ? Array.from(masonry.grid.children)
48
+ : [];
49
+ masonry.grid.style.contain = "layout";
50
+
51
+ masonry.rowGap = parseInt(
52
+ window.getComputedStyle(masonry.grid).getPropertyValue("grid-row-gap"),
53
+ 10
54
+ );
55
+
56
+ masonry.resizeObserver = new ResizeObserver(
57
+ masonry.resizeAllItems.bind(masonry)
58
+ );
59
+
60
+ masonry.resizeObserver.observe(masonry.grid);
61
+ masonry.resizeAllItems();
62
+ }
63
+
64
+ destroy() {
65
+ if (this.resizeObserver) {
66
+ this.resizeObserver.unobserve(this.grid);
67
+ this.resizeObserver = null;
68
+ }
69
+
70
+ this.grid.style.contain = "";
71
+ this.grid.style.alignItems = "";
72
+ this.gridItems.forEach((item) => {
73
+ const newItem = item;
74
+
75
+ newItem.style.gridRowEnd = "";
76
+ });
77
+ }
78
+ }
79
+
80
+ 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