isotope.js 砌体布局特性答案

【问题标题】：isotope.js masonry layout peculiarityisotope.js 砌体布局特性
【发布时间】：2013-11-14 14:24:59
【问题描述】：

我想要一个项目网格，当您单击一个时，会附加一个类以更改其大小。这很好用，除非您单击第一项（左上角），此时布局是垃圾！ Here's a jfiddle 显示问题：单击任何颜色以查看它是否正常工作；点击黑色的可以看到一个非常不砌体的布局。

有什么想法吗？

JAVASCRIPT

jQuery(函数($){ var $container = $('#grid'); $container.isotope({ itemSelector: '.tile', 布局模式：'砌体' });

    $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>

【问题讨论】：

标签： jquery layout

【解决方案1】：

当您的同位素物品尺寸不同时，同位素和砌体在许多情况下都会留下空隙。布局算法并没有那么健壮——即使在你可以有一个没有间隙的完美砌体布局的情况下，它通常还是会留下间隙。

它只发生在第一个（黑色）元素上的原因是，isotope 在layout / reLayout 上自动使用第一个元素的尺寸进行计算。

幸运的是，有一个很棒的同位素布局插件，名为perfectmasonry，它显着改善了这种行为并消除了差距。 Find it on GitHub here。

假设您的元素都是网格大小的（例如，它们都是 n 像素的倍数），这应该可以解决您的问题。

【讨论】：

谢谢，但我已经尝试过 PerfectMasonry，在我的情况下它根本没有任何区别（事实上，当我将它添加到我的 jsFiddle 时，它会导致所有瓷砖堆叠彼此顶部并且不可见；它仍然在我的本地实例上运行，但没有改善）。
有什么方法可以使用第一个元素来绕过同位素/砌体来制定布局？
我有一种技巧，它使第一行项目“隐藏”（实际上比其他图块的高度小，并且全白），从响应的角度来看，这并不理想。但是如果我可以使用这样的东西就可以了，但是将元素移动到第二行的第一个位置...$container .prepend(activeElement.remove()) .isotope('reloadItems') 。 isotope({ sortBy: 'original-order' });

【解决方案2】：

啊哈，我找到了一个解决方案 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);
};

【讨论】：