Jquery Isotope : horizontal masonry 만들기

Question

JQuery Isotope를 사용하여 수평 버전의 JQuery Masonry를 빌드하려고합니다. 내 결과가 다음과 같이 보이기를 바랍니다.

Layout-modes (벽돌 모양의 수평 옵션).

$('#isotopecontainer').isotope({ 
     itemSelector : '.item', 
     masonry : { 
      columnWidth : 270 
     } 
}); 

그러나,이 일이 일어나고 : 같은 Masonry Horizontal 내 스크립트가 보이는 : 페이지가 #isotopecontainer DIV의 높이를로드

1)이 설정되어있는 사이트의 지시 사항에 따라

60px에서 .item div의 상단 만 볼 수 있습니다.

2) 브라우저의 크기를 조정하면 #isotopecontainer div가 확장되지만 .item div는 예제와 같이 정렬되지 않습니다.

누구든지 나를 올바른 방향으로 안내 할 수 있습니까? 내 데모 사이트는 here입니다.

감사합니다.

Answer 1

당신은 데모 사이트가 Firefox에서 작동하고 있습니다.

당신이 맞습니다. 크롬에서는 그렇지 않습니다. 문제는 매우 간단합니다. 이미지에 폭 및 높이 속성을 설정해야합니다. 또는 파일을 가져올 때까지 Chrome에서 0px 높이 (컨테이너의 높이가 기본 높이가되도록 함)로로드합니다. Firefox는 이런 식으로 행동하지 않으며 레이아웃을 만들기 전에 이미지 크기를 기다립니다.

희망이 도움이됩니다.

Answer 2

#isotophecontainer은 overflow: hidden입니다. 제거하면 Chrome에서 나를위한 모든 이미지가 표시됩니다.

Answer 3

layoutMode : 'masonryHorizontal'을 추가해야합니다. 그렇지 않으면 작동하지 않습니다. 이와 같이 :

$('#isotopecontainer').isotope({ 
    itemSelector : '.item', 
    layoutMode: 'masonryHorizontal', 
    masonry : { 
     columnWidth : 270 
    } 

});