마지막 칼럼에서 석조 벽돌을 제거하십시오.

Question

유동적 인 반응성 동위 원소, 벽돌 그리드가 있습니다 (이 예제에서는로드 된 이미지를 사용하지만 중단 점은 없습니다).

마지막 도랑 기둥을 제거하고 싶으므로 오른쪽에 간격이 없으므로 코드가 매끄럽지 만 코드를 풀 수는 없습니다.

여기 설정을 예를했습니다 : http://codepen.io/mattpark22/pen/yyzKgo

주요 기능은 다음과 같습니다

colWidth = function() { 
    $w = $container.width(), 
     columnNum = 1, 
     columnWidth = 0; 
    if ($w > 1400) { 
     columnNum = 7; 
    } else if ($w > 1200) { 
     columnNum = 6; 
    } else if ($w > 1000) { 
     columnNum = 5; 
    } else if ($w > 800) { 
     columnNum = 4; 
    } else if ($w > 600) { 
     columnNum = 3; 
    } else if ($w > 300) { 
     columnNum = 2; 
    } 
    columnWidth = Math.floor($w/columnNum); 
    $container.find('.isotope-item').each(function() { 
     var $item = $(this), 
      multiplier_w = $item.attr('class').match(/isotope-item-w(\d)/), 
      multiplier_h = $item.attr('class').match(/isotope-item-h(\d)/), 
      width = multiplier_w ? columnWidth*multiplier_w[1]-5 : columnWidth-5, 
      height = multiplier_h ? columnWidth*multiplier_h[1]*0.45-5 : columnWidth*0.45-5; 
     $item.css({ 
      width: width, 
      height: height 
     }); 
    }); 
    return columnWidth; 
}; 
isotope = function() { 
    $container.isotope({ 
     resizable: false, 
     itemSelector: '.isotope-item', 
     filter: hashFilter, 
     masonry: { 
      columnWidth: colWidth(), 
      gutterWidth: 5 
     } 
    }); 
}; 

모든 아이디어/팁을 주시면 감사하겠습니다!

Answer 1

Isotope v2의 경우, 벽돌 gutterWidth 옵션이 gutter으로 변경되었습니다.

$container.isotope({ 
    isResizeBound: false, 
    itemSelector: '.isotope-item', 
    filter: hashFilter, 
    masonry: { 
    columnWidth: colWidth(), 
    gutter: 5 
    } 
}); 

http://codepen.io/desandro/pen/QwqmRO

는 또한, columnWidth의 기능은 더 이상 동위 원소 v2와 ​​함께 작동하지 않습니다. element sizing 대신

을 사용하십시오.