Make masonry layout calculations consistent

agarun · Nov 2, 2024 · 086c175 · 086c175
1 parent 1a8d581
commit 086c175
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/src/app/folders/page.tsx b/src/app/folders/page.tsx
@@ -21,7 +21,7 @@ async function Folders() {
             >
               <Link
                 href={`/folders/${titleToSlug(folder.title)}`}
-                className={`flex items-center size-full px-4 py-   text-xl text-gray-800
+                className={`flex items-center size-full px-4 py-3 text-xl text-gray-800
                   hover:text-black`}
               >
                 <span className="font-medium tracking-widest">

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -56,7 +56,7 @@
   }
 }
 .fade-in-delayed {
-  animation: fadeInDelayed 2.825s ease-in-out;
+  animation: fadeInDelayed 2.33s ease-in-out;
 }
 @keyframes blink {
   50% {

diff --git a/src/lib/images/masonry.tsx b/src/lib/images/masonry.tsx
@@ -2,22 +2,31 @@
 
 import * as React from 'react';
 import { Masonry as MasonicMasonry } from 'masonic';
+import { type RenderComponentProps } from 'masonic';
 import { useLightbox } from '../../hooks/use-lightbox';
 import { Photo } from '@/types';
 
-const MasonryItem = ({ data: { url, width, height } }: { data: Photo }) => (
+const MasonryItem = ({
+  width: itemWidth,
+  data: { url, width, height }
+}: RenderComponentProps<Photo>) => (
   <a
     href={url}
     data-pswp-width={width}
     data-pswp-height={height}
     target="_blank"
     rel="noreferrer"
   >
-    <img src={url} alt="" />
+    <img
+      src={url}
+      width={(width / itemWidth) * width}
+      height={(width / itemWidth) * height}
+      alt=""
+    />
   </a>
 );
 
-function columnWidth() {
+function currentColumnWidth() {
   if (window.innerWidth > 2000) {
     // 3xl
     return 425;
@@ -33,6 +42,17 @@ function columnWidth() {
   }
 }
 
+function useAverageHeight(items: Array<Photo>, columnWidth: number) {
+  const heights = items.map(item => {
+    const aspectRatio = item.width / item.height;
+    const scaledHeight = columnWidth / aspectRatio;
+    return scaledHeight;
+  });
+  const averageHeight =
+    heights.reduce((sum, height) => sum + height, 0) / items.length;
+  return Math.floor(averageHeight);
+}
+
 export const Masonry = ({
   items = [],
   ...props
@@ -42,6 +62,9 @@ export const Masonry = ({
 }) => {
   useLightbox(items);
 
+  const columnWidth = currentColumnWidth();
+  const averageHeight = useAverageHeight(items, columnWidth);
+
   if (items.length === 0) {
     return null;
   }
@@ -58,8 +81,9 @@ export const Masonry = ({
         items={items}
         render={MasonryItem}
         columnGutter={window.innerWidth <= 512 ? 9 : 18}
-        columnWidth={columnWidth()}
-        itemHeightEstimate={500}
+        columnWidth={columnWidth}
+        itemHeightEstimate={averageHeight}
+        maxColumnCount={4}
         overscanBy={1}
         {...props}
       />