최신 웹 디자인 환경은 끊임없이 발전하고 있습니다. 테이블 기반 목록과 오프셋 페이지 매김이 더 이상 사용되지 않으며, 무한 스크롤이있는 벽돌 레이아웃은 인기를 얻고 있습니다. 이 기사는 벽돌 레이아웃과 그 응용 프로그램의 복잡성을 탐구합니다.
키 테이크 아웃 :
Pinterest 스타일 레이아웃으로도 알려진 벽돌 레이아웃은 고정 상승 행이없는 열 기반 그리드 레이아웃입니다. 간격을 최소화하여 공간을 극대화합니다
일반적인 용도에는 이미지 갤러리, 블로그 게시물 및 포트폴리오가 포함됩니다. 특히 품목이 다양한 크기를 가질 때 유리합니다.
벽돌 레이아웃 생성에는 종종 복잡한 계산이 필요합니다. 플러그인을 사용하는 것이 일반적으로 더 효율적입니다. 인기있는 옵션으로는 Masonry, Wookmark, 동위 원소, 중첩 및 freetile.js
고려해야 할 플러그인 기능을 고려해야 할 플러그인 기능은 동적 열 사이징, 정렬/필터링, 애니메이션, 동적 요소 처리 및 레이아웃 사용자 정의 옵션이 포함됩니다.
석조 레이아웃 이해 :
"Masonry 레이아웃"이라는 용어는 인기있는 JQuery Masonry 플러그인에서 유래 한 것 같습니다. Pinterest 스타일 레이아웃 (Pinterest의 초기 채택으로 인해)이라고도하는이 제품은 기존 그리드와 달리 고정 상해 행을 피하는 열 기반 그리드입니다. 이 최적화 된 공간 사용은 불필요한 간격을 줄입니다. 전통적인 CSS 플로트 기반 레이아웃은 일반적이지만 요소 크기를 설명하지 않고 요소를 수평으로 추가 한 다음 수직으로 추가하여 비효율적 인 간격을 초래합니다.
대조적으로, 벽돌 레이아웃은 동적으로 조정되어 낭비되는 공간을 최소화하고 시각적 매력을 향상시킵니다.
-
메이슨 레이아웃이 작동합니다 : -
석조 레이아웃은 널리 사용됩니다
Pinterest : -
Pinterest 예제 이미지 -
wall :
wall 예제 이미지
Erik Johansson Photography : Erik Johansson Photography 예제 이미지
Thereason.us :
Thereason.us 예제 이미지 
실용 응용 프로그램 :
석조 레이아웃은 기능적 및 미적 장점을 모두 제공합니다 : 중첩
<..> freetile.js
Masonry 플러그인 기능 :
시각적으로 유사하지만 플러그인은 뚜렷한 기능을 제공합니다. 고려해야 할 주요 기능은 다음과 같습니다
열 크기 : 동적 열 사이징은 더 큰 유연성을 제공합니다
정렬 및 필터링 :
구조 조정없이 동적 레이아웃 조정을 가능하게합니다
애니메이션 : 레이아웃 변경을 애니메이션으로하여 사용자 경험을 향상시킵니다
동적 요소 :
페이지 새로 고침없이 요소를 추가/제거 할 수 있습니다
레이아웃 옵션 : 열 폭, 거터 크기 및 정렬의 사용자 정의.
-
플러그인을 사용하여 벽돌 레이아웃 생성 (Masonry.js 예제) : -
이 예제는 인기있는 Masonry.js 플러그인을 사용합니다 :
1 단계 :
html의 끝에 - 포함.
2 단계 :
폭이 다양한 폭과 높이를 가진 요소를 생성하고 공통 클래스를 공유합니다 (예 : "항목").
3 단계 : 메이슨 플러그인 초기화 :
결론 :
메이슨 레이아웃은 플러그인을 사용하여 쉽게 구현됩니다. 원하는 결과를 얻기 위해 다른 플러그인 및 설정을 실험하십시오.
(FAQ를 포함한 원본 콘텐츠의 나머지 부분은 이미 제공되고 위에 제공된 정보의 반복이기 때문에 간결하게 생략됩니다.)
위 내용은 벽돌 레이아웃 이해 - sitepoint의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
