isotope.js砌體佈局特性

我想要一個網格的項目，並且當您單擊一個類時會附加更改其大小。這工作正常，除非你點擊第一個項目（左上角），在這一點上的佈局，以及垃圾！ Here's a jfiddle顯示問題：點擊任何顏色看它工作得很好;點擊黑色以查看非石工佈局。isotope.js砌體佈局特性

任何想法？

JAVASCRIPT

 
    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>

來源

2013-11-14 user2992421

同位素與圬工都留在很多情況下，差距，當你的同位素項目具有不同的尺寸。佈局算法不夠穩固 - 即使在您可以完美砌築佈局且沒有間隙的情況下，它總是會留下空隙。

它只發生在第一個（黑色）元素上的原因是因爲同位素自動使用第一個元素的尺寸來執行其計算。

幸運的是，有一個很好的同位素佈局插件叫做perfectmasonry，它顯着改善了這種行爲並消除了差距。 Find it on GitHub here。

假設您的元素都是網格大小的（例如，它們都是n像素的倍數），這應該可以解決您的問題。

來源

2013-11-14 14:32:40 Ennui

謝謝，但我已經嘗試過PerfectMasonry，並且它沒有任何差別在我的情況（事實上，當我將它添加到我的jsFiddle時，它會導致所有的圖塊堆疊在一起並且不可見;它仍然在我的本地實例上運行，但不會改進）。 – user2992421

有沒有什麼辦法可以讓同位素/石工使用第一個元素來計算佈局？ – user2992421

我有一種黑客渲染的第一行項目'隱藏'（實際上比其他瓷磚更小的高度，全白色），這從響應的角度來看並不理想。但是，如果我可以使用類似的東西，但是將元件移動到第二行的第一個位置，那就沒問題了...... $container \t \t \t \t .prepend(activeElement.remove()) \t \t \t \t .isotope('reloadItems') \t \t \t \t .isotope({ sortBy: 'original-order' }); – user2992421

啊哈，我找到了解決辦法here並不採用perfectMasonry而是延伸同位素......

$.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); 
};

來源

2013-11-15 11:54:13 user2992421

isotope.js砌體佈局特性

回答

相關問題