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.
|
|
|
|
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];
|
|
|
|
|
|
|
|
|
|
if (!masonry) return;
|
|
|
|
|
|
|
|
|
|
masonry.style.gridAutoRows = "20px"
|
|
|
|
|
masonry.style.marginBottom = "80px"
|
|
|
|
|
let allItems = masonry.getElementsByClassName("masonry-item");
|
|
|
|
|
|
|
|
|
|
for (const item of allItems) {
|
|
|
|
|
resizeItem(masonry, item)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.addEventListener("load", () => {
|
|
|
|
|
resizeAll()
|
|
|
|
|
|
|
|
|
|
window.addEventListener("resize", resizeAll);
|
|
|
|
|
})
|
