Question

我想要一个项目网格，当你点击一个项目时，会附加一个类来改变它的大小。这个工作正常，除非你点击第一个项目（左上角），此时布局就是垃圾！ Here's a jfiddle显示问题：点击任意颜色以查看其运行良好;点击黑色的一个看到一个非常不整齐的布局。

有什么想法吗？

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>

Answer 1

当同位素物品的大小不同时，同位素和砌体在许多情况下都会留下空隙。布局算法不是那么强大 - 即使在你可以拥有完美的砖石布局而没有间隙的情况下，它通常也会留下空隙。

仅在第一个（黑色）元素上发生的原因是同位素自动使用layout / reLayout上第一个元素的维度进行计算。

幸运的是，有一个很好的同位素布局插件称为perfectmasonry，它可以显着改善这种行为并消除间隙。的 Find it on GitHub here 即可。

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

Answer 2

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

同位素.js砌体布局的特殊性

2 个答案: