我想有一个项目的网格，当你点击一个时，一个类会被追加以改变它的大小。这工作正常，除了当你点击第一个项目（左上角），在这一点上，布局是，嗯，垃圾！这里有一个jfiddle显示了这个问题：单击任何颜色可以看到它工作得很好；单击黑色可以看到一个非常非瀑布流布局。
有什么想法吗？
JAVASCRIPT
jQuery(function($){
var $container = $('#grid');
$container.isotope({
itemSelector: '.tile',
layoutMode: 'masonry'
});
同位素和砌体都留下缺口在许多情况下，当你的同位素项目有不同的大小。布局算法并不那么健壮——即使在你可以有一个完美的没有间隙的瀑布流布局的情况下，它也经常会留下间隙。
之所以只在第一个（黑色）元素上发生，是因为同位素在布局时自动使用第一个元素的尺寸进行计算。
幸运的是，有一个很棒的同位素布局插件，名为perfectmassy，它显著改进了这种行为，并消除了这些漏洞。在GitHub上找到它。
假设您的元素都是网格大小（例如，它们都是n像素的倍数），这应该可以解决您的问题。
啊哈，我在这里找到了一个解决方案，它不使用完美的砌体，而是扩展同位素...
$.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);
};
