site/_includes/scripts/masonry.js
/**
   * Iterates over every item in the grid and sets their translateY() so we get
   * a nice masonry effect.
   * This function also sets the height of the grid by determining the element
   * furthest down the page.
   */
Iterates over every item in the grid and sets their translateY() so we get
a nice masonry effect.
This function also sets the height of the grid by determining the element
furthest down the page.
Iterates over every item in the grid and sets their translateY () so we get a nice masonry effect . This function also sets the height of the grid by determining the element furthest down the page .
function layout() {
    let gridHeight = 0;
    items.forEach((item, idx) => {
      if (idx < 2) {
        return;
      }
       I tried moving this outside of the forEach but found that it could
       get stale if the user had scrolled the page and some of the bottom
       cards would appear too high up.
      const initialY = items[0].getBoundingClientRect().y;
      const previousItem = items[idx - 2];
      const previousItemRect = previousItem.getBoundingClientRect();
      const previousItemBottom = previousItemRect.bottom - initialY;
      const currentItemRect = item.getBoundingClientRect();
      const currentItemTop = previousItemBottom + gap;
      const currentItemBottom = currentItemTop + currentItemRect.height;
       Find the box that's furthest down the page and use it to set the
       height of the grid.
       Because we're transforming our elements we need to do this to force
       things like the footer down to the bottom of the page.
      gridHeight = Math.max(currentItemBottom, gridHeight);
       prettier-ignore
      item.style.transform = `translateY(${currentItemTop}px)`;
      grid.style.height = `${gridHeight}px`;
    });
  }
function layout ( ) { let gridHeight = 0 ; items . forEach ( ( item , idx ) => { if ( idx < 2 ) { return ; } const initialY = items [ 0 ] . getBoundingClientRect ( ) . y ; const previousItem = items [ idx - 2 ] ; const previousItemRect = previousItem . getBoundingClientRect ( ) ; const previousItemBottom = previousItemRect . bottom - initialY ; const currentItemRect = item . getBoundingClientRect ( ) ; const currentItemTop = previousItemBottom + gap ; const currentItemBottom = currentItemTop + currentItemRect . height ; gridHeight = Math . max ( currentItemBottom , gridHeight ) ; item . style . transform = ` ${ currentItemTop } ` ; grid . style . height = ` ${ gridHeight } ` ; } ) ; }
Iterates over every item in the grid and sets their translateY() so we get
 a nice masonry effect.
Iterates over every item in the grid and sets their translateY () so we get a nice masonry effect .
// Define an initial height for the grid. // This will increase as the items are transformed down the page. // Ignore the first two items since they're at the top of each column // and don't need to move. // We capture the initial y position of the first element so we can // subtract it from the bottom of other elements. If the grid itself is // 10px down the page we need to subtract this from each element's y // position, otherwise they would translate too far down the page. // // I tried moving this outside of the forEach but found that it could // get stale if the user had scrolled the page and some of the bottom // cards would appear too high up. // Find the box that's furthest down the page and use it to set the // height of the grid. // Because we're transforming our elements we need to do this to force // things like the footer down to the bottom of the page. // prettier-ignore