import React, { useEffect, useRef, useState, } from 'react' // Tries to stack the columns into even heights const spreadEven = (imgDataObjects, numberOfColumns) => { const reducer = (totalHeight, curImgObj) => totalHeight + curImgObj.height; const totalStackHeight = imgDataObjects.reduce(reducer, 0); const desiredColumnHeight = Math.floor(totalStackHeight / numberOfColumns); const arrayCopy = imgDataObjects.slice(0); const output = []; if (numberOfColumns === 1) { return [arrayCopy]; } else { while ( numberOfColumns > 0 ) { let columnHeight = 0; let cutListAt = 1; arrayCopy.forEach((item, index) => { if (columnHeight < desiredColumnHeight ) { columnHeight += item.height; cutListAt = index; } }); output.push({ columnHeight, columnItems: arrayCopy.splice(0, cutListAt) }); numberOfColumns -= 1; } // Handle Leftovers arrayCopy.forEach(item => { output.sort((a, b) => a.columnHeight - b.columnHeight); output[0].columnHeight += item.height; output[0].columnItems.push(item); }); } return output.map(item => item.columnItems); } export const ColumnGallery = ({ columnMinWidth = 250, minNumberOfColumns = 2, items = [], ...props }) => { const containerRef = useRef() const childrenRef = useRef() const [width, setWidth] = useState(0) const [columns, setColumns] = useState([]) const [prevNumberOfColumns, setPrevNumberOfColumns] = useState(0) useEffect(() => { if (!items.length) return let numberOfColumns = Math.floor((width / columnMinWidth)); numberOfColumns = numberOfColumns < minNumberOfColumns ? minNumberOfColumns : numberOfColumns; const columnCountDifference = Math.abs(numberOfColumns - prevNumberOfColumns); if (columnCountDifference > 0) { setColumns(spreadEven(items, numberOfColumns)) setPrevNumberOfColumns(numberOfColumns) } }, [width, items, columnMinWidth, minNumberOfColumns, prevNumberOfColumns]) useEffect(() => { const setContainerWidth = () => { setWidth(containerRef.current.offsetWidth); } setContainerWidth() window.addEventListener('resize', setContainerWidth) return () => { window.removeEventListener('resize', setContainerWidth) } }, []) return (
) }