Isotope.js - 요소 사이의 흰색 공간

Question

나는 과거에 masonry.js를 사용했지만 Isotope.js가 더 유연하고 더 좋다고 들었습니다. 그리드 이미지 갤러리를 만들기 위해 가서 다운로드했습니다.

지금 내 문제는 크기 조정 (페이지로드시) 전에 Isotope가 요소 사이에 약간의 공백을 남기고 있다는 것입니다. 크기를 조정 한 후에 요소가 크기가 변하고 공백이 사라집니다. 원래 창 크기로 돌아가더라도 마찬가지입니다.

http://codepen.io/anon/pen/lByri

jQuery(document).ready(function(){ 
    var $container =jQuery('.gallery-grid-container').isotope({ 
     itemSelector: '.item', 
     masonry: { 
      columnWidth: '.item' 
     } 
    }); 
}); 

나는 단지 내 웹 사이트에, codepen에 그것을 할 때 아무 문제가 없습니다.

(http://avetisthemes.com/photography/gallery-grid/) 동위 원소 작품은 당신이 jQuery를 쓸 사업부 폭을 소요하고 위치와 함께 화면에 요소를 배치하는 것이 얼마나

: 절대, 위쪽 및 왼쪽 값.

예 : 내 이미지는 540x375입니다. 내 이미지는 25 % 너비입니다. 그래서 4 개의 이미지가 연속적으로 나타납니다.

두 번째 이미지가 내 행에 표시되므로 속성 부분을 이해할 수 있습니다. 크기가 480px (로드시) 인 왼쪽 속성을 제공하고 크기를 조정 한 후 원래 크기로 돌아 가면 475px의 왼쪽 속성을 제공합니다.

475px에서 그리드가 완벽하지만 480px에서로드 할 때 약간의 공백이 남습니다.

도움 주셔서 감사합니다. - 문의

Answer 1

드디어 답을 찾았습니다.

CSS 문제 일 뿐이므로 vertical-align:top을 .item 클래스에 입력해야했습니다.