공백없이 동위 원소 컨테이너 만들기

isotope 플러그인을 사용하고 있습니다. div에 이미지를 패키지화하려고합니다. 나는 문제가있는 항목이 제대로 포장되지 않은 착용 데 큰 공백공백없이 동위 원소 컨테이너 만들기

이있다

내가 큰

을 사용하고 세 가지 크기의 이미지가 있습니다 - 500 픽셀
매체 -
작은 250 픽셀 - 내가
,321를 초기화하려면 다음 코드를 사용하고 150 픽셀

masonry는 첫 번째 항목을 사용하여 coulmn 너비를 결정했지만 큰 항목부터 작은 항목까지 상관없이 사용할 수 있습니다. 어느 쪽도 멋지게 뭉치지 않는 것 같습니다.

다음은 가장 작은 이미지를 처음 사용할 때의 출력입니다. 처음 두 항목은 서로 옆에 있지만 다음 두 번째와 세 번째 항목 사이의 간격이 (위치 프로모션 (MD이 왜 컨테이너의 경계는 확실하지 않다 빨간색

enter image description here

에 1), 여기에

블로그 프로모션 (LG)은 1) 내가 두 번째 이미지는 나에게 더 의미 enter image description here

먼저 가장 큰 항목을 넣으면 결과입니다. 큰 항목은 열의 길이를 결정하기 때문에 컨테이너에는 두 개의 열만 있습니다. 왜 세 번째 항목 (비디오 프로모 (sm1))이 두 번째 항목 (위치 홍보 (md) 1) 옆에없는 지 잘 모르겠습니다.

두 번째 사진에서 상위 2 개 항목의 이름을 볼 수 없습니다. 나는 당신이 아직도 내가 논평하는 것을 말할 수 있다고 생각합니다.

편집 : 나는 완벽한 벽돌 플러그인을 우연히 발견 , 나는 그것을 구현하려고하지만 오류를 얻을

이 라인에 정의되지 않은 재산 '레이아웃'을 읽을 수 없습니다

this.options.perfectMasonry.layout

EDIT2 제대로 작동하지만 더 이상 보이지 않습니다.

새 코드

$container.isotope({ 
    layoutMode: 'perfectMasonry', 
    perfectMasonry: { 
     layout: 'vertical' 
    }, 
    itemSelector: '.iso-container'

});

EDIT 3

가까이 얻기.

새로운 코드

$container.isotope({ 
    layoutMode: 'perfectMasonry', 
    perfectMasonry: { 
     layout: 'vertical', 
     columnWidth: 20, 
     rowHeight: 20 
    }, 
    itemSelector: '.iso-container' 
});

동위 원소를 사용하는 열쇠는 올바른 columnWidth를 선택한다 enter image description here

출처

2013-07-30 dan_vitch

새로운 이미지.

은 여기 내 업데이트 된 전화

$container.isotope({ 
    layoutMode: 'perfectMasonry', 
    perfectMasonry: { 
     layout: 'vertical', 
     columnWidth: 25 
    }, 

    itemSelector: '.iso-container' 
});

이 번호에 도달하는 방법 인 객체가 중복되지 않는 경우 최소 공배수를 선택하는 것입니다.

제 경우에는 25였습니다. 5와 10을 모두 시도했지만 충분하지 않았습니다. 50을 선택하면 객체 사이에 공백이 생깁니다.

컨테이너 하단에는 들쭉날쭉 한 가장자리가 있지만 왼쪽과 오른쪽 모두에는 컨테이너 중간에 '구멍'이 없습니다.

또한 컨테이너의 다른 주문을 시도해야 할 수도 있습니다.

다음과 같이 항목을 배치하십시오. 대, 소, 중, 중간은 공백을 남기고, 작게, 크게, 작게, 중간으로 잘 정리하여 정리할 수 있습니다.

출처

2013-08-01 16:23:42

공백없이 동위 원소 컨테이너 만들기

답변

관련 문제