clean up masonry algorithm

src/components/MasonryGallery.js

@@ -43,11 +43,10 @@ const MasonryGallery = ({
     [images]
   );
 
-  const rowsByBreakpoint = React.useMemo(
+  const targetAspect = aspectTargetsByBreakpoint[breakpoint];
+  const rows = React.useMemo(
     () =>
-      R.map(
       R.pipe(
-          (targetAspect) =>
         R.reduce(
           (acc, currentAspect) => {
             const currentRow = acc.pop();
@@ -76,17 +75,13 @@ const MasonryGallery = ({
               },
             ];
           },
-              [{ aspect: 0, startIndex: 0, images: 0 }],
-              aspectRatios
+          [{ aspect: 0, startIndex: 0, images: 0 }]
         ),
         R.indexBy(R.prop("startIndex"))
-        )
-      )(aspectTargetsByBreakpoint),
-    [aspectRatios, aspectTargetsByBreakpoint]
+      )(aspectRatios),
+    [aspectRatios, targetAspect]
   );
 
-  const rows = rowsByBreakpoint[breakpoint];
-
   let cursor = 0;
   return (
     <div
@@ -104,10 +99,11 @@ const MasonryGallery = ({
         const rowAspectRatioSum = currentRow.aspect;
         const ar = getAspectRatio(image);
         let width;
-        let height = `calc(100vw / ${rowAspectRatioSum} - 10px)`
-        if (ar === rowAspectRatioSum) {
-          width = `calc(300px * ${ar})`;
-          height = 'unset'
+        let height = `calc(100vw / ${rowAspectRatioSum} - 10px)`;
+        if (rowAspectRatioSum < targetAspect / 2) {
+          // incomplete row, render stuff at "ideal" sizes instead of filling width
+          width = `calc(100vw / ${targetAspect / ar})`;
+          height = "unset";
         } else {
           const widthNumber = ((ar / rowAspectRatioSum) * 100).toFixed(7);
           width = `${widthNumber}%`;