Pinterest는 Div 스태킹을 통해 어떻게 반응형 레이아웃을 구현하나요?

Pinterest의 독창적인 Div 스태킹 레이아웃이 다양한 브라우저 크기에 적응하는 방법

Pinterest의 매혹적인 시각적 레이아웃은 소셜 미디어로서의 성공에 중요한 역할을 했습니다. 미디어 플랫폼. 이 레이아웃의 주요 측면은 인접한 열의 높이에 관계없이 열의 수를 조정하고 세로로 쌓을 수 있다는 것입니다.

비하인드 스토리: 사용자 정의 jQuery 및 CSS

웹사이트의 코드는 이 레이아웃이 절대 div 위치 지정을 사용하여 달성되었음을 보여줍니다. 그러나 Quora의 공동 창립자가 말했듯이 Pinterest는 맞춤형 jQuery와 CSS를 사용하여 레이아웃의 동작을 제어합니다.

레이아웃 청사진

재능있게 jQuery 스크립트 고안되었으며 다음 사항에 의존합니다. 원칙:

1. 절대 위치 지정: 각 핀 컨테이너는 절대적으로 위치 지정되므로 배치를 정확하게 제어할 수 있습니다.
2. 열 너비 계산: 스크립트는 상위 컨테이너의 크기와 원하는 컨테이너 수를 기반으로 각 열의 너비를 계산합니다. 열.
3. 열 사이의 여백: 인접한 열 사이의 여백을 나타내는 여백 값이 정의됩니다.
4. 높이 배열: 배열이 생성됩니다. 수직을 결정하는 데 사용되는 각 열의 높이를 저장합니다. 스태킹.
5. 핀을 통한 반복: 새 핀이 추가되면 스크립트는 각 핀을 반복하여 가장 짧은 열에 배치합니다.
6. 좌표 설정: 각 핀의 왼쪽 위치는 해당 열 인덱스에 열 너비와 여백을 곱한 값으로 설정됩니다. 상단 위치는 해당 인스턴스에서 가장 짧은 열의 높이에 해당합니다.
7. 높이 조정: 핀을 배치한 후 해당 높이가 배열에서 선택한 열의 높이에 추가됩니다.

커스텀의 장점 레이아웃

이 사용자 정의 레이아웃은 여러 가지 장점을 제공합니다.

• 반응형: 레이아웃은 브라우저 크기 변경에 따라 자동으로 조정되어 최적의 보기 환경을 제공합니다.
• 수직 쌓기: 인접한 열 높이에 관계없이 핀이 수직으로 쌓여 그리드와 같은 효과가 나타납니다.
• 효율성: 스크립트가 매우 효율적이므로 페이지에 여러 핀을 레이아웃하는 데 걸리는 시간이 줄어듭니다.

위 내용은 Pinterest는 Div 스태킹을 통해 어떻게 반응형 레이아웃을 구현하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!