1

我想要一个项目网格，当您单击一个项目时，会附加一个类以更改其大小。这很好用，除非您单击第一项（左上角），此时布局是垃圾！这是一个显示问题的 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>
4

2 回答 2

1

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

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

幸运的是，有一个很棒的同位素布局插件perfectmasonry，可以显着改善这种行为并消除差距。 在 GitHub 上找到它。

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

于 2013-11-14T14:32:40.173 回答
0

啊哈，我在这里找到了一个解决方案，它不使用完美砌体但扩展同位素......

$.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-15T11:54:13.210 回答