isotope.js 벽돌 레이아웃 특색

Question

아이템 그리드를 갖고 싶습니다. 하나를 클릭하면 클래스의 크기가 변경됩니다. 이것은 첫 번째 항목 (왼쪽 상단)을 클릭 할 때를 제외하고는 잘 작동합니다. 레이아웃은 잘 쓰레기입니다. 문제를 표시하는 Here's a jfiddle : 제대로 작동하는지 보려면 아무 색이나 클릭하십시오. 검정색을 클릭하면 매우 조화되지 않은 레이아웃을 볼 수 있습니다.

아이디어가 있으십니까? 당신의 동위 원소 항목이 서로 다른 크기를 가질 때

자바 스크립트

 
    jQuery(function($){ 
     var $container = $('#grid'); 
     $container.isotope({ 
      itemSelector: '.tile', 
      layoutMode: 'masonry' 
     });
 

$container.delegate('.tile', 'click', function(){ 
     $this = $(this); 
     if(! $this.hasClass('locked')) { 
      $this.addClass('clicked'); 
      $('.tile').each(function(){ 
       if(! $(this).hasClass('clicked')) { 
        $(this).removeClass('large'); 
       } 
      }); 
      $this.removeClass('clicked'); 
      $this.toggleClass('large'); 
      $container.isotope('reLayout'); 
     } 
    }); 
}); 
</pre> 

Answer 1

동위 원소 및 벽돌 모두가 많은 상황에서 간격을 둡니다. 레이아웃 알고리즘은 그다지 강력하지 않습니다. 심지어 갭이없는 완벽한 석조 건축물을 가질 수있는 상황에서도 어쨌든 갭을 남기게됩니다.

첫 번째 요소 (검은 색 요소)에서만 발생하는 이유는 isotope가 layout/reLayout에있는 첫 번째 요소의 크기를 자동으로 계산하기 때문입니다.

다행히도이 동작을 크게 향상시키고 간격을 제거하는 perfectmasonry이라는 동위 원소를위한 훌륭한 레이아웃 플러그인이 있습니다. Find it on GitHub here.

요소가 모두 격자 크기 (예 : n 픽셀의 배수)라고 가정하면 문제가 해결됩니다.

Answer 2

아하, 내가 perfectMasonry을 사용하지만, 동위 원소를 확장하지 않는 솔루션 here ...

$.Isotope.prototype._getMasonryGutterColumns = function() { 
    var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0; 
    containerWidth = this.element.width(); 
    this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth || 
    this.$filteredAtoms.outerWidth(true) || 
    containerWidth; 
    this.masonry.columnWidth += gutter; 
    this.masonry.cols = Math.floor((containerWidth + gutter)/this.masonry.columnWidth); 
    this.masonry.cols = Math.max(this.masonry.cols, 1); 
}; 

$.Isotope.prototype._masonryReset = function() { 
    this.masonry = {}; 
    this._getMasonryGutterColumns(); 
    var i = this.masonry.cols; 
    this.masonry.colYs = []; 
    while (i--) { 
     this.masonry.colYs.push(0); 
    } 
}; 

$.Isotope.prototype._masonryResizeChanged = function() { 
    var prevSegments = this.masonry.cols; 
    this._getMasonryGutterColumns(); 
    return (this.masonry.cols !== prevSegments); 
};