pinterest.com 의 절대 div 스태킹 레이아웃을 복제하는 방법

pinterest.com 의 절대 div 스태킹 레이아웃을 복제하는 방법

닫힘.이 질문은 더 필요합니다.집중적인현재 답변을 수락하고 있지 않습니다.

---

이 질문을 개선하고 싶으십니까?이 게시물을 편집하여 하나의 문제에만 초점을 맞추도록 질문을 업데이트합니다.

10년 전에 문을 닫았습니다.

이 질문을 개선합니다.

저는 Pinterest.com 의 div 레이아웃을 복제하려고 합니다. 특히 브라우저 크기 조정 시 열 수가 더 많거나 적거나 인접한 열 높이에 따라 세로 쌓기가 달라지지 않도록 조정하는 방법을 찾고 있습니다.소스 코드는 각 분할 위치가 절대임을 나타냅니다.한 공동 설립자가 커스텀 jQuery와 CSS로 완료되었다는 Quora 게시물에 답변했습니다.저는 결과를 왼쪽에서 오른쪽으로 정리했으면 합니다.제가 직접 만들 수 있도록 어떤 지시라도 해주시면 대단히 감사하겠습니다.

핀터레스트 대본을 썼습니다.ID는 레이아웃과 관련이 없으며 다른 상호 작용 관련 JS에 사용됩니다.작동 방식의 기본은 다음과 같습니다.

사전:

• 핀 용기를 완전히 배치합니다.
• 열 너비 결정
• 열(거터) 사이의 여백 결정

배열 설정:

• 상위 컨테이너의 너비를 가져옵니다. 적합할 열 수 계산
• 열 수와 길이가 같은 빈 배열을 만듭니다.레이아웃을 작성할 때 각 열의 높이를 저장하려면 이 배열을 사용합니다(예: 1열의 높이가 배열[0]로 저장됨).

각 핀을 반복합니다.

• 각 핀을 추가하는 순간 가장 짧은 열에 넣습니다.
• "left:" === 열 #(인덱스 배열)에 열 너비 + 여백을 곱한 값
• "top:" === 해당 시점에서 가장 짧은 열에 대한 배열(높이) 값
• 마지막으로 핀 높이를 열 높이(어레이 값)에 추가합니다.

결과는 가볍습니다.크롬에서 50개 이상의 핀으로 된 전체 페이지를 레이아웃하는 데는 <10ms>가 걸립니다.

jQuery Plug-in Masonry에서 이러한 기능을 확인할 수도 있습니다.

우리는 Wookmark에 대해 같은 질문을 여러 번 받았기 때문에 jQuery 플러그인을 출시했습니다.정확히 이런 유형의 레이아웃을 만듭니다.여기서 보기 - Wookmark jQuery 플러그인

모든 옵션을 살펴본 결과, 저는 다음과 같은 방식으로 Pinterest와 유사한 레이아웃을 구현하게 되었습니다.

모든 DIV는 다음과 같습니다.

div.tile {
    display: inline-block;
    vertical-align: top;
}

이것은 그들이 떠 있을 때보다 그들이 열에 더 잘 위치하도록 만듭니다.

그런 다음 페이지가 로드되면 JavaScript에서 모든 DIV를 반복하여 간격을 제거합니다.다음과 같은 경우에 잘 작동합니다.

1. DIV는 높이가 크게 다르지 않습니다.
2. 일부 사소한 주문 위반(아래에 있던 일부 요소는 위에서 끌어올릴 수 있음)은 신경쓰지 않습니다.
3. 당신은 맨 아래 줄이 다른 높이여도 상관없습니다.

이 접근 방식의 이점 - HTML은 검색 엔진에 적합하며, 방화벽에 의해 비활성화/차단된 JavaScript로 작동할 수 있으며, HTML의 요소 시퀀스는 논리적 시퀀스(이전의 최신 항목)와 일치합니다.

이들은 엔티티를 ID가 있는 열로 분할합니다(나쁜 솔루션...클래스 이름을 사용하는 것이 좋습니다). 그런 다음 열 그룹별로 위치를 계산합니다.

이것을 시도해 보는 게 어때요, 간단한 js 물건들.

http://vanilla-masonry.desandro.com/index.html

또는 jQuery를 사용하여 스크롤 로딩도 가능합니다.

http://masonry.desandro.com/index.html

플로트를 사용하고 최소 너비에 도달하면 최소 너비와 함께 백분율을 사용하여 디브 너비를 크기로 지정하여 디브가 자동으로 떨어지도록 할 수 있습니까?이것이 http://www.goldtree.co.za/work 에서 작동하는 방법입니다.

언급URL : https://stackoverflow.com/questions/7109362/how-to-replicate-pinterest-coms-absolute-div-stacking-layout