jQuery 벽돌이 특정 폭에서 무작위로 끊어짐

Question

jQuery Masonry를 사용하여 반응 형 그리드를 개발하고 있습니다. 나는 단순한 CSS 비례 그리드를 사용하고 있으며, 모든 것이 잘 동작한다 (수레가 수직으로 움직이지 않는다는 사실 외에는). 벽돌을 추가하는 순간에이 레이아웃이 깨집니다.

$(document).ready(function() { 

    // select container 
    var $work = $(".work"); 

    // set columns based on window width 
    var columns = 3, 
     setColumns = function() { columns = $(window).width() > 768 ? 3 : 2; }; 

    $work.imagesLoaded(function() { 
     $work.masonry({ 
      itemSelector: '.project', 
      columnWidth: function(containerWidth) { 
       return containerWidth/columns; 
      } 
     }); 

     $(window).on('resize', function() { 
        // set columns now that the browser width is different. 
      setColumns(); 
      $work.masonry('reload'); 
     }).resize(); 
    }); 
}); 

문제를 보여주는 jsfiddle은 here입니다.

768px 중단 점 이상에서는 모든 것이 작동하지만 (깜박임이 많음에도 불구하고) 중단 점 아래에서는 두 열이 하나가되어야합니다.

수정 나는 시도했다 : columnWidth의 설정

• 1에 사파리와 파이어 폭스에서 수정을, 그러나 크롬을.
• 열 중 하나의 너비를 49 % 대신 47.5 %로 설정합니다 (2 % 여백 하나를 차지함). 그러나 그리드가 시각적으로 정렬되지 않습니다.

너비와 여백이 너무 조금 이상하다고 생각되지만 코드를 철저히 검사 했으므로 숫자가 100 % 너비까지 합쳐져야합니다. 그것은 벽돌이 들어올 때에 만 부서집니다.

생각하십니까? 어떤 도움이라도 대단히 감사하겠습니다.

Answer 1

여백을 0으로 설정하면 벽돌이 모두 맞아야합니다.

http://jsfiddle.net/uMgwm/1

/* basic grid structure */ 
.half, .third, .two-third, .quarter { 
    float: left; 
    margin: 0; 
} 
    .two-third + .third, .third:nth-child(3n+0), .quarter:nth-child(4n+0) { 
     margin: 0 0 0 0; 
    } 
    .half:nth-child(2n+0), .third:nth-child(3n+0), .quarter:nth-child(3n+0) { 
     margin-right: 0; 
    }