pinterest.com의 절대 div 스택 레이아웃을 복제하는 방법 [닫기]

104

Pinterest.com의 div 레이아웃을 복제하려고합니다. 특히 브라우저 크기 조정시 열 수를 더 많이 / 더 적게 조정하고 수직 스택은 인접한 열 높이에 의존하지 않습니다. 소스 코드는 각 div가 절대 위치임을 보여줍니다. 공동 창립자가 Quora 게시물에 사용자 정의 jQuery 및 CSS로 완료되었다고 답변했습니다. 결과를 왼쪽에서 오른쪽으로 정렬하고 싶습니다. 직접 만들 수있는 방향은 대단히 감사하겠습니다.

jquery  css  layout 
— Chrickso
소스
간단한 Jquery와 CSS로 직접 코딩했습니다. 크기 조정시이를 변경하려면 함수로 래핑하고 컨테이너 요소 jsfiddle.net/92gxyugb/1
— Andrew WC Brown

답변:

79

이러한 종류의 기능 에 대해 jQuery 플러그인 Masonry 에서 확인할 수도 있습니다 .

— 단발.
소스
3
정말 놀라운 라이브러리. 지금은 아무 문제없이 사용하고 있습니다.
— AhmetB-Google
183

Pinterest 스크립트를 작성했습니다. ID는 레이아웃과 관련이 없으며 다른 상호 작용 관련 JS에 사용됩니다. 작동 원리는 다음과 같습니다.

미리:

  • 핀 컨테이너를 절대 위치
  • 열 너비 결정
  • 열 (여백) 사이의 여백 결정

어레이 설정 :

  • 부모 컨테이너의 너비를 가져옵니다. 맞는 열의 수를 계산
  • 길이가 열 수와 같은 빈 배열을 만듭니다. 이 배열을 사용하여 레이아웃을 작성할 때 각 열의 높이를 저장합니다. 예를 들어, 열 1의 높이는 array [0]으로 저장됩니다.

각 핀을 통해 루프 :

  • 추가되는 순간에 각 핀을 가장 짧은 열에 넣습니다.
  • "left :"=== 열 번호 (인덱스 배열) x 열 너비 + 여백
  • "top :"=== 해당 시간에 가장 짧은 열의 배열 (높이) 값
  • 마지막으로 핀 높이를 열 높이 (배열 값)에 추가합니다.

결과는 가볍습니다. Chrome에서 50 개 이상의 핀으로 구성된 전체 페이지를 배치하는 데 10ms 미만이 걸립니다.

— 에반 샤프
소스
4
기둥의 높이를 계산한다는 것은 무엇을 의미합니까? 그 안에있는 항목의 수와 높이를 모를 경우 얼마나 높아야하는지 어떻게 알 수 있습니까? 시연 할 의사 코드를 레이아웃 할 수 있습니까?
— Michael Giovanni Pumo 2011 년
22
여기 고체 튜토리얼입니다 - benholland.me/javascript/...
— hollandben
1
익명 사용자의 피드백 (편집 대기열에 있음) : 흥미롭게도 jQuery에서 정확히 동일한 스크립트를 수행했습니다. 실제로 1 행과 N 열이있는 테이블을 만들고 왼쪽에서 오른쪽으로 가장 짧은 열에 추가하는 것입니다. 우선 순위. 또한 왼쪽에서 오른쪽으로 배치 할 때 실제로 열을 건너 뛰는 데 필요한 "최소 높이 차이"상수를 추가했지만, 이는 가능한 한 높이를 잃지 않고 레이아웃에 시간순으로 직관적 인 디스플레이를 제공합니다
— oers
1
@MichaelGiovanniPumo 레이아웃 전에 높이를 알아야한다고 생각합니다 (Pinterest의 경우). div가 서로 겹치는 "초기"상태가 없습니다. 높이를 알 수 없으면 수행 할 수 없습니다.
— ptgamr 2014-08-03
1
@hollandben의 링크가 죽었습니다. 새 링크 : benholland.me/javascript/2012/02/20/…
— Lukmo
57

Wookmark에 대해 동일한 질문을 여러 번 받았기 때문에 jQuery 플러그인을 출시했습니다 . 정확히 이러한 유형의 레이아웃을 생성합니다. 여기에서보기 -Wookmark jQuery 플러그인

— GBKS
소스
4
이 솔루션은 석조물보다 더 빨리로드되는 것 같습니다.
— Michael L Watson 2012
어느 것이 더 낫다고 생각합니까? wookmark 또는 벽돌?
— Ramje 2013-08-07
나는 이것을 벽돌보다 선호한다. 마이클이 말한 것처럼 더 빠르다.
— nerdburn
2

모든 옵션을 살펴본 결과 Pinterest와 유사한 레이아웃을 다음과 같이 구현했습니다.

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

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

이렇게하면 플로팅 될 때보 다 행의 위치가 더 좋습니다.

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

  1. DIV는 높이가 크게 다르지 않습니다.
  2. 약간의 주문 위반은 신경 쓰지 않습니다 (아래에있는 일부 요소는 위에 올릴 수 있음).
  3. 당신은 다른 높이의 결론에 신경 쓰지 않습니다.

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

— esp
소스
빼야하는 오프셋을 어떻게 계산했는지 말씀해 주 시겠어요? 또한 오른쪽에있는 마지막 요소의 문제를 어떻게 해결 했습니까? 조금 더 큰 요소가 하나 있기 때문에 거기로 밀어 넣습니다.
— Lukas Oppermann 2013
@LukasOppermann 1) 타일의 오프셋은 이전 행의 동일한 열에있는 타일의 오프셋과 이전 행의 가장 높은 타일 높이와 같은 열의 타일 높이 간의 차이의 합입니다. 이전 행에서. dev.sheeporpig.com/news를 살펴 보십시오 ( 개발 사이트에 액세스하려면 먼저 dev.sheeporpig.com/sheep/3210 링크를 클릭해야합니다. 따라서 별도의 파일에서 압축되지 않은 주석 처리 된 스크립트를 볼 수 있습니다), 스크립트 파일 stock_news.js, compressTiles 함수.
— esp
@LukasOppermann 2) 대답으로 CSS를 사용하면 (특히 display : inline-block) 발생하지 않습니다. float : left your divs 인 경우에만 발생합니다. 나는 플로트를 사용하지 않습니다.
— esp
0

ID가있는 열로 엔티티를 분할 한 다음 (나쁜 솔루션 ... 클래스 이름을 더 잘 사용함) 열 그룹별로 위치를 계산합니다.

— ant_Ti
소스
2
+1 소스 코드를 살펴 봅니다.
— Bojangles
그것은 나에게 흥미로웠다하지만 난 적은 JS 계산과 BETER 솔루션 있다고 생각
— ant_Ti
display: inline-block제 생각에는 사용할 수 있지만 세로 높이가 다른 항목은 함께 앉지 않습니다.
— Bojangles 2011-08-18
1
열 컨테이너 (divs with float:left;및 last one with overflow: hidden;)를 사용하고 거기에 요소를 저장하는 것이
— 좋습니다
4
좋은 지적. 정말로 JavaScript 경로로 가고 싶다면 jQuery Masonry를 사용할 수 있습니까?
— Bojangles 2011-08-18
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.