3

在更改其他项目的大小后，我想将较小的项目移动到空白空间。

这是它在 jsfiddle 上的样子：http: //jsfiddle.net/FRH8v/

例如，当您单击否时。2，你会得到它上面的两个空格。如何移动较小的物品来填充这些空间？

这是代码（与 jsfiddle 相同）：

$(function(){
    // Modified Isotope methods for gutters in masonry
    $.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 ||
        // Or use the size of the first item
        this.$filteredAtoms.outerWidth(true) ||
        // If there's no items, use size of container
        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() {
        // Layout-specific props
        this.masonry = {};
        // FIXME shouldn't have to call this again
        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;
        // Update cols/rows
        this._getMasonryGutterColumns();
        // Return if updated cols/rows is not equal to previous
        return (this.masonry.cols !== prevSegments);
    };

    var $container = $('#container'),
        $element = '.element';

    $container.isotope({
        itemSelector: $element,
        resizable: false,
        transformsEnabled: true,
        animationEngine: 'best-available',
        layout: 'masonry',
        masonry: {
            gutterWidth: 4,
            columnWidth: 157
        }
    });

    // click action
    $container.find($element).each(function(){
        var that = $(this);

        that.click(function(){
            if( that.hasClass('active') ){
                $container.find($element).removeClass('active');
            } else {
                $container.find($element).removeClass('active');
                that.addClass('active');
            }

            $container.isotope('reLayout');

            return false;
        });
    });
});
4

1 回答 1

0

Well, that's how isotope / masonry works.

I doesn't really remove all "holes" as good as possible. From my experience, I would say that isotope/masonry only pushes tiles up, but doesn't jump over tiles.

In your fiddle, when enlarging "5", "7" won't go up, because it would have to "jump over" 5.

But why? I don't know exactly, but I could imagine 2 reasons:

  • It preserves the order of elements. In extreme case, an optimal algorithm could totally shuffle your items. When you would resize individual boxes, you would have completely unpredictable "jumping around" of block during the resize.
  • It reduces the computational complexity - more info here: http://en.wikipedia.org/wiki/Knapsack_problem#Computational_complexity

That said, it seems like packery (http://packery.metafizzy.co/) does exactly what you want :)

于 2014-05-26T14:42:39.317 回答