5 ?? Firefox? CSS ???? ?? ???? ??? ????? ?? ???????. ?? ????? ?? ???? ???? ???? ????? ?? ???? ?? ?????. ??? ?? ????? ??? ??? ??? CSS ??? ??? ????? ???? ? ??? ?????.

?? ??? Firefox? ???? ??? (?? ???? ??? ? ????), ?? ??? ????? ????? ?? ??? JavaScript ??? ???? ?????.

Firefox? grid-template-rows (?? ?????) ?? grid-template-columns masonry ??? ???? CSS? ?? ????? ?????.

? ?? ???? ??? ???? ????? ???? (??? Firefox ? ??) ??? ????? ?? JavaScript ?? ??? ????. ??? ???? ?? ??? ?????? ???? ??? ?? ?????.

?? ???? ??????

?????? Firefox? about:config ? "Masonry"? ?????. ???? layout.css.grid-template-masonry-value.enabled ???? ????, ?? ?? false (???)?? true ? ??? ? ????.

?? ??? ???????

HTML ??? ??? ????.

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174364597525146.jpg" class="lazy" alt="?? ?? ???">

?? ???? ?????

?? ??? ??? CSS ??? ????? ??????. ???? ???? ?? ?? (? : 10em ? ?????. ?? ??? ???? ??? ??? ??? ?? ??? ?? ???? ????? ??? ???? ?? ??? ?? 10em ? ???? ?? ? ? ??? ??? ??? ?? Min(10em, 100%) ???. ?? ?? ? ?? ?? ???? ?? ?? ? ???? ?? ???? ??? ??? ?? ??? ?? ?? ???? ?????.

 $ W : Min (10EM, 100%);

.grid-Masonry {
  ????? : ???;
  ???-???-?? : ?? (?? ??, $ w);

  > * {?? : $ W; }
}

SASS ??? ??? ?? ?? Min() ?? min() ??????.

??, ??? ??????!

??? ???? ?? ?? ???? ???? ???? ?? ??? ???? ?? ? ?? ?? ? ( $s )? ???? ??? ??? ???? ?????. ?? ? ?? ? ? ??? ??? ??????.

 $ S : .5EM;

/* ??? ??? ???*/
.grid-Masonry {
  /* ?? ???? ??*/
  ??? ??? : ??;
  ??? ? : $ s;
  ?? : $ S;
}

/* ?? ???*/
HTML {?? : #555; }

???? ??? ?? ?, ??? ??? ???? (?, ???)? ?? ??? ??? ??????. ?? ?? ???? ???? ??? ???? ????? ?? ? ???? ???? ??? ?????.

 img {
  Border-Radius : 4px;
  Box-Shadow : 2px 2px 5px rgba (#000, .7);
  ?? : ??? (1);
}

?? ?? ????? ???? ????? ?? ??? ???????.

 .grid-Masonry {
  /* ?? ???? ??*/
  ???-??? ? : ???;
}

??? ???? ??????? ???? ??? ??? ??? Firefox??? ?? ??? ?????.

??? ?? ????? ?????? ??? ???? ??? ???? ...

JavaScript ?? ???

????? ?? ???? JavaScript ??? ???? ?? ?? ???? .grid--masonry ??? ??? ??? ????? grid-template-rows masonry ?? ???? ????? ??? ?????. ?? ???? ?? ?? ????? ? ??? ???? ??? ???? ??????.

 let grids = [... document.querySelectorall ( '. Grid-Masonry')];

if (grids.length && getComputedStyle (??? [0]). GridTemplaterows! == 'Masonry') {
  Console.log ( 'oops, ?? ????? ???? ?????');
} ? ?? {
  Console.log ( '?? ?? ??? ?? ??!');
}

??? ?? ??? ???? ??? ? ?? ??? ?? ? ?? ? ?? ??? ?? ?? ? ?? ????? (? ??? ???? 0???).

 let grids = [... document.querySelectorall ( '. Grid-Masonry')];

if (grids.length && getComputedStyle (??? [0]). GridTemplaterows! == 'Masonry') {
  grids = grids.map (grid => ({
    _el : ???,
    ? : parsefloat (GetComputedStyle (???) .gridrowgap),
    ?? : [... grid.childnodes] .filter (c => c.nodetype === 1),
    NCOL : 0
  });

  grids.foreach (grid => console.log (`??? ?? : $ {grid.items.length}; ??? ? : $ {grid.gap} px`);
}

?? ??? ?? ???? ??????? (?? nodeType ? 1?? ?????). ??? ??? ???? ???? ??? ???? ??? ??? ??? ?? ? ????.

???? ?? ???????? ??? ??? ???? ??? ???????. ? ??? ?? ? ??? ? ???? ?? ?? ?? ? ?? ????. ??? ??? ?? ????? ?? ??? ?? ?? ?????? ??? ??? ? ?????.

 if (grids.length && getComputedStyle (??? [0]). GridTemplaterows! == 'Masonry') {
  Grids = grids.map (/*? ??? ?????*/);

  ?? ???? () {
    grids.foreach (grid => {
      /* ?? ??/?? ? ? ?? ?? ??*/
      ncol = getComputedStyle (grid._el) .gridTemPlateColumns.split ( '') .length;

      if (grid.ncol! == ncol) {
        grid.ncol = ncol;
        Console.log ( '??? ?? ???');
      }
    });
  }

  addeventListener ( 'load', e => {
    ??? ??? ?(); /* ?? ??*/
    addeventListener ( 'resize', ????, false);
  }, ??);
}

layout() ??? ???? ?? ?? ?? ? ?? ??? ?? ???? ?????.

??? ??? ?????? ? ?? ??? ?? ???? ?? ??? ???? ???? (?? ?? ?? ?? ?? ??? ???? ?? 0? ?? ??? ?? ? ? ????).

???? ??? ??? ??? ?? ??? ?????!

??? ??? ? ?? ncol ??? ?? ?? ???? ??????. ?? ? ? ??? ?? ? ??? ?? ???? ??? ?? ????? ?? ??? ?????. ?? ?? ?? ???? ?? ????? ?? ???? ??? ??? ?? ????? ?? ??? ?? ??? ? ????.

 /* ? ?? ??? ??*/
if (grid.ncol! == ncol) {
  /* ???? ? ? ?*/
  grid.ncol = ncol;

  /* ?? ????, ??? ??*/
  grid.items.foreach (c => c.style.removeproperty ( 'margin-top'));

  /* ? ? ??? ???? ??*/
  if (grid.ncol> 1) {
    grid.items.slice (ncol) .foreach ((c, i) => {
      prev_fin = grid.Items [i] .getBoundingClientRect (). ??, /* ?? ????? ?? ????* /
          curr_ini = c.getBoundingClientRect (). ??; /* ?? ????? ?? ????*/

      c.style.margintop =`$ {prev_fin grid.gap -curr_ini} px`;
    });
  }
}

?? ??? ???? ??? ???? ???? ????!

??? ??

?? ???? ??

?? ????? ? ???? ?? ?? ???? ???? ??? ???? ? ???? ? ? ??? ? ???? ?? ? ???? ???? (?? ???? ??).

<a href="http://miracleart.cn/link/849c1f472f609bb4a3bacafef177f541">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174364597550777.jpg" class="lazy" alt="?? ?? ???">
</a>

??? ??? CSS? ?? ??????? ?? ?????. ??? ??? ??? ? ?? ?? ??? ??? ??? ??? ??? ???? ??? align-self: start ???? ?? ????? ?? ? ??? ?? ?? ???? ????? ?????.

 .grid--masonry> * {?? ?? : ??; }

img {
  ????? : ??; /* ??? ??? ??? ??? ?????*/
  ?? : 100%;
  /* ?? ???? ??*/
}

? ?? ??? ??? ??????

?? ? ?? ????? ???? ?? ??? ???? ? ???? (?, ??? ???? ???? ???? ?? ???? ????????).

 .Grid-Masonry> : First-Child {
  ??? -?? : 1 / -1;
  ?? ?? : 29VH;
}

img {
  Max-Height : ??;
  ?? ?? : ??;
  /* ?? ???? ??*/
}

??? ???? ??? ???? ?? ??? ?? ??? ??? ?? ?? ??? ???????.

 grids = grids.map (grid => ({
  _el : ???,
  ? : parsefloat (GetComputedStyle (???) .gridrowgap),
  ?? : [... grid.childnodes] .filter (c =>
    C.NodeType === 1 &&
     getComputedStyle (C) .GridColumnend! == -1
  ),)
  NCOL : 0
});

??? ? ???? ??? ??? ??????

???? ?? ?? ??? ???? ???? ??? ?? ? ???. ??? ??? ??? JS? ?? ??? ?? ?? CSS? ?????. ?? ?? ?? ? ???? ? ?? ??? max-height ??? ?????.

?? ???? ? ? ???? ?? ???? ???? ???? ??? ??? ???? ????.

? ?? ???? ??? ?? ??? ?? ?? ??? ??? ?? ????.

??? ? ?? ???? ??? ???? ??? ????.

 $ W : Minmax (Min (20EM, 100%), 1FR);

??? ??? ??? ? ??? ?????.

??? ?? ?? ??? ? ??? ??? ??? ???? ??? ?? ?? ?? ???? ??? ??? ?? ?? ?? ??? ?? ?? ? ??? ?? ??? ??? ????. ? ?? ???? ?? ?? ?? ???? ?? ???? ??? ???? ? ? ???? ????.

? ??? ????? ?? ??? ??? ?? ??? ??? ???? ???? ?? ???????. ?, ?? ???? ??? ??? ??? 0 ?? ??? ????????. ?? ?? if ?? ? ??? ?? ????? ??? ??? ????? ? ?? ? ??? ????.

 if (grid.ncol! == ncol || grid.mod) {
  /* ??? ??*/
  Grid.mod = 0;
}

?,???? grid.mod ?? ??? ?????? ? ?? ????? ResizeObserver ???? ????.

 if (grids.length && getComputedStyle (??? [0]). GridTemplaterows! == 'Masonry') {
  O = ??? resizeObserver??? (entries => {
    entries.foreach (entry => {
      grids.find (grid => grid._el === entry.target.parentElement) .mod = 1;
    });
  });

  /* ??? ??*/

  addeventListener ( 'load', e => {
    /* ??? ??*/
    grids.foreach (grid => {grid.items.foreach (c => o.observe (c));});
  }, ??);
}

??? ? ?? ???? ?? ???? ??? ?? ??? ??? ? ?? ? ? ????. ??? ??? ??? ? if ??? ????!

?? ??? ??? ?? ?? ??? ?? ? ? grid.mod 1? ???? ?????. ??? ?? ??? ?? ????? ??? ???? ?? ???? ?????. ??? ??? ??? ??? ??? ?? ??? ???? ??? ?? ??? ????? ?? ????.

??? ??? ?? ???? ??? ????? ???? grid.mod 0? ?? ??? ???? ?? ?? ??? ?????? ??????.

 ?? ???? () {
  grids.foreach (grid => {
    grid.items.foreach (c => {
      new_h = c.getBoundingClientRect (). ??;

      if (new_h! == c.dataset.h) {
        c.dataset.h = new_h;
        ???. ??;
      }
    });

    /* ??? ??*/
  });
}

?? ??! ?? ??? ?? ?? ???? ??? ????. ?? ?? ????? 800 ??? ???? ??? ?? ?? ???? 300 ??? ?????.

??? ??? ...??? ...

????? ??? ??????

??, @supports ??? ???? ?? CSS ???? ? ?? ???? ??? ???? ?? ??? ?? ???? ?? ????? ?? ? ??? ??? ?? ? ? ????. ? ??? IE9? ?????.

??? ?? ? ??? ?? ??? ??? ??? ????. ????? ??????? ?? ??? ??? ???? ?? ????. ??? ???? ???? ????? ? ???? ?????.

JavaScript??? ??? ??????

??, ??? ?? ??? js ???? JavaScript? ?? ?? ? JS ?????? ???? ?? ???? ?? ? ? ????! ??? ??? ?? ??? ?? ??? ??? ?? ???? ?????.

? ??? ?? ?? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!