FacetWP – Masonry with the layout builder?

mgibbs189

{{gist file=”test.js” lang=”javascript”}}
function resizeGridItem(item){
grid = document.getElementsByClassName(“fwpl-layout”)[0];
rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue(‘grid-auto-rows’));
rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue(‘grid-row-gap’));
rowSpan = Math.ceil((item.querySelector(‘.fwpl-row’).getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
item.style.gridRowEnd = “span “+rowSpan;
}

function resizeAllGridItems(){
allItems = document.getElementsByClassName(“fwpl-result”);
for(x=0;x<allItems.length;x++){
resizeGridItem(allItems[x]);
}
}

function resizeInstance(instance){
item = instance.elements[0];
resizeGridItem(item);
}

window.onload = resizeAllGridItems();
window.addEventListener(“resize”, resizeAllGridItems);

allItems = document.getElementsByClassName(“fwpl-result”);
for(x=0;x<allItems.length;x++){
imagesLoaded( allItems[x], resizeInstance);
}
{{/gist}}