경량 벽돌 솔루션

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/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174364597525146.jpg?x-oss-process=image/resize,p_40" 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="https://www.php.cn/link/849c1f472f609bb4a3bacafef177f541">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174364597550777.jpg?x-oss-process=image/resize,p_40" 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!