Pinterest의 반응형 Div 스태킹 레이아웃을 복제하는 방법은 무엇입니까?

Pinterest의 절대적인 Div 스태킹 레이아웃 복제

Pinterest의 고유한 div 레이아웃은 기능을 복제하려는 프로그래머에게 도전 과제를 제시합니다. 브라우저 크기 조정에 따라 레이아웃을 동적으로 조정하고 수직 스택 종속성을 방지하는 데 사용되는 사용자 정의 jQuery 및 CSS는 유사한 결과를 얻는 방법에 대해 궁금해합니다.

답변:

Pinterest 레이아웃의 핵심 원칙에는 핀 컨테이너의 절대적인 위치 지정, 열 너비와 여백 크기 결정, 배열을 활용하여 각 높이 추적이 포함됩니다.

1. 핀 컨테이너 위치 지정:

각 핀 컨테이너는 상위 컨테이너 내에 절대적으로 위치해야 합니다. 이를 통해 개별 핀을 서로 독립적으로 배치할 수 있습니다.

2. 기둥 및 홈통 크기 계산:

핀 컨테이너에 사용 가능한 너비를 결정하고 편안하게 맞는 열 수를 계산하십시오. 결과 열 너비와 사전 정의된 여백 크기를 사용하여 전체 레이아웃 매개변수를 계산합니다.

3. 배열 기반 높이 추적:

배열 초기화 길이는 열 수와 같습니다. 각 핀을 반복하면서 그 순간 높이가 가장 짧은 열을 확인합니다. 해당 배열 요소 내에 이 높이를 저장합니다.

4. 핀 배치:

각 핀을 반복하고 다음을 수행합니다.

• 높이가 가장 짧은 기둥 내에 배치합니다(에 의해 결정됨).
• "왼쪽" CSS 속성을 열 너비와 여백을 곱한 열 인덱스로 설정합니다.
• "top" CSS 속성을 배열에 저장된 높이로 설정합니다. 선택한 열.
• 핀 높이를 추가하여 열 높이(배열 값)를 업데이트합니다.

이러한 단계를 따르면 Pinterest의 반응형 동작과 효율적인 핀 배치 알고리즘을 모방한 레이아웃을 생성할 수 있습니다.

위 내용은 Pinterest의 반응형 Div 스태킹 레이아웃을 복제하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!