adding img loading, height for container

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiny-components/masonry",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Masonry for Desktop and Mobile",
   "repository": {
     "type": "git",

src/masonry.js

@@ -17,6 +17,8 @@ class Masonry {
      */
     constructor() {
 
+        this.height = 0
+
         // getting elements 
         this.elements = document.querySelectorAll('.tiny-masonry__item-inner')
         this.container = document.querySelector('.tiny-masonry')
@@ -24,7 +26,18 @@ class Masonry {
         // getting gap for calculate from grid 
         this.gap = parseInt(getComputedStyle(this.container, 'gap').getPropertyValue('grid-gap').split(' ')[0])
 
+        // adding loaded event 
+        this.elements.forEach((element) => {
+            const img = element.querySelector('img')
+
+            if (img.completed) {
                 this.calculate()
+            } else {
+                img.addEventListener('load', () => {
+                    this.calculate()
+                })
+            }
+        })
 
         window.addEventListener('resize', throttle(300, () => {
             this.calculate()
@@ -50,6 +63,8 @@ class Masonry {
             }
         }
 
+        this.height = []
+
         for (let i = 0; i < this.elements.length; i++) {
 
             let marginTop = 0
@@ -83,6 +98,16 @@ class Masonry {
             } else {
                 this.elements[i].parentElement.style.visibility = 'hidden'
             }
+
+            // add complete height for element
+            this.height.push(parseInt(marginTop) + parseInt(this.elements[i].offsetHeight) + (this.gap * row))
+        }
+
+        // getting heighest height
+        this.height = Math.max(...this.height)
+        
+        if (this.height > 0) { 
+            this.container.style.height = this.height + 'px'
         }
     }
 }