Template:Masonry: Difference between revisions

VisualWikitext

@@ Line 1: / Line 1: @@
-<html>
+{{#widget:StartMasonry}}
-<head>
+[[File:EarlyEndlessSummer0.mp4|thumb|none|Endless Summer]]
-<script>
+[[File:EarlyVampires.mp4|thumb|none|Vampires]]
-let grids = [...document.querySelectorAll('.masonry-group')];
+[[File:EarlySunset.mp4|thumb|none|Sunset]]
+[[File:EarlyDaytona.mp4|thumb|none|Daytona]]
-if (grids.length && getComputedStyle(grids[0]).gridTemplateRows !== 'masonry') {
+[[File:EarlyEndlessSummer.mp4|thumb|none|Endless Summer]]
-  grids = grids.map(grid => ({
+[[File:EarlyLonelyCity.mp4|thumb|none|Nighthawks]]
-    _el: grid,
+[[File:EarlySunset2.mp4|thumb|none|Sunset]]
-    gap: parseFloat(getComputedStyle(grid).gridRowGap),
+[[File:SheWasDreaminOfBoys.mp4|thumb|none|She Was Dreamin' of Boys]]
-    items: [...grid.childNodes].filter(c => c.nodeType === 1 && +getComputedStyle(c).gridColumnEnd !== -1),
+[[File:UnknownEndlessSummerSong.mp4|thumb|none|Unknown song]]
-    ncol: 0 }));
+[[File:EarlyEqualizerClip.mp4|thumb|none|The Equalizer]]
+[[File:EarlyCrockettsRevenge.mp4|thumb|none|Crockett's Revenge]]
+{{#widget:EndMasonry}}
-  function layout() {
-    grids.forEach(grid => {
-      /* get the post relayout number of columns */
-      let ncol = getComputedStyle(grid._el).gridTemplateColumns.split(' ').length;
-      /* if the number of columns has changed */
-      if (grid.ncol !== ncol) {
-        /* update number of columns */
-        grid.ncol = ncol;
-        /* revert to initial positioning, no margin */
-        grid.items.forEach(c => c.style.removeProperty('margin-top'));
-        /* if we have more than one column */
-        if (grid.ncol > 1) {
-          grid.items.slice(ncol).forEach((c, i) => {
-            let prev_fin = grid.items[i].getBoundingClientRect().bottom /* bottom edge of item above */,
-            curr_ini = c.getBoundingClientRect().top /* top edge of current item */;
-            c.style.marginTop = `${prev_fin + grid.gap - curr_ini}px`;
-          });
-        }
-      }
-    });
-  }
-  addEventListener('load', e => {
-    layout(); /* initial load */
-    addEventListener('resize', layout, false); /* on resize */
-  }, false);
-}
-</script>
-</head>
-</html>

Latest revision as of 21:31, 23 March 2024