You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
24 lines
806 B
24 lines
806 B
3 years ago
|
function resizeItem(masonry, item){
|
||
|
|
let rowHeight = parseInt(window.getComputedStyle(masonry).getPropertyValue('grid-auto-rows'));
|
||
|
|
let rowGap = parseInt(window.getComputedStyle(masonry).getPropertyValue('grid-row-gap'));
|
||
|
|
let rowSpan = Math.ceil((item.querySelector('.masonry-item-content').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
|
||
|
|
item.style.gridRowEnd = "span "+rowSpan;
|
||
|
|
}
|
||
|
|
|
||
|
|
function resizeAll(){
|
||
|
|
let masonry = document.getElementsByClassName("masonry")[0];
|
||
|
|
masonry.style.gridAutoRows = "20px"
|
||
|
|
masonry.style.marginBottom = "80px"
|
||
|
|
let allItems = document.getElementsByClassName("masonry-item");
|
||
|
|
|
||
|
|
for (const item of allItems) {
|
||
|
|
resizeItem(masonry, item)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
window.addEventListener("load", () => {
|
||
|
|
resizeAll()
|
||
|
|
|
||
|
|
window.addEventListener("resize", resizeAll);
|
||
|
|
})
|