|
|
| Line 1: |
Line 1: |
| <html> | | <html> |
| <head> | | <masonry-layout> |
| <script>
| | [[File:EarlyEndlessSummer0.mp4|thumb|none|Endless Summer]] |
| let grids = [...document.querySelectorAll('.masonry-group')];
| | [[File:EarlyVampires.mp4|thumb|none|Vampires]] |
| | | [[File:EarlySunset.mp4|thumb|none|Sunset]] |
| if (grids.length && getComputedStyle(grids[0]).gridTemplateRows !== 'masonry') {
| | [[File:EarlyDaytona.mp4|thumb|none|Daytona]] |
| grids = grids.map(grid => ({
| | [[File:EarlyEndlessSummer.mp4|thumb|none|Endless Summer]] |
| _el: grid,
| | [[File:EarlyLonelyCity.mp4|thumb|none|Nighthawks]] |
| gap: parseFloat(getComputedStyle(grid).gridRowGap),
| | [[File:EarlySunset2.mp4|thumb|none|Sunset]] |
| items: [...grid.childNodes].filter(c => c.nodeType === 1 && +getComputedStyle(c).gridColumnEnd !== -1),
| | [[File:SheWasDreaminOfBoys.mp4|thumb|none|She Was Dreamin' of Boys]] |
| ncol: 0 }));
| | [[File:UnknownEndlessSummerSong.mp4|thumb|none|Unknown song]] |
| | | [[File:EarlyEqualizerClip.mp4|thumb|none|The Equalizer]] |
| | | [[File:EarlyCrockettsRevenge.mp4|thumb|none|Crockett's Revenge]] |
| function layout() {
| | </masonry-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> | | </html> |
