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砌体布局特性

回答

相关问题