Compare commits

..

No commits in common. 'main' and 'v0.2.0' have entirely different histories.
main ... v0.2.0

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

@ -17,8 +17,6 @@ class Masonry {
*/
constructor() {
this.height = 0
// getting elements
this.elements = document.querySelectorAll('.tiny-masonry__item-inner')
this.container = document.querySelector('.tiny-masonry')
@ -26,18 +24,7 @@ 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()
})
}
})
this.calculate()
window.addEventListener('resize', throttle(300, () => {
this.calculate()
@ -63,8 +50,6 @@ class Masonry {
}
}
this.height = []
for (let i = 0; i < this.elements.length; i++) {
let marginTop = 0
@ -98,16 +83,6 @@ 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'
}
}
}

Loading…
Cancel
Save