Question

我希望在更改其他项目的大小后将较小的项目移动到空白区域。

这就是它在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;
        });
    });
});

Answer 1

嗯，这就是同位素/砌体的工作原理。

我并没有尽可能地删除所有“漏洞”。根据我的经验，我会说同位素/砖石只能推动瓷砖，但不会跳过瓷砖。

在你的小提琴中，当放大“5”时，“7”不会上升，因为它必须“跳过”5。

但为什么呢？我完全不知道，但我可以想象两个原因：

它保留了元素的顺序。在极端情况下，最佳算法可以完全改变您的项目。当您调整单个框的大小时，在调整大小期间，您将完全无法预测“跳转”。
它降低了计算复杂性 - 更多信息请点击此处：http://en.wikipedia.org/wiki/Knapsack_problem#Computational_complexity

那就是说，看起来像packery（http://packery.metafizzy.co/）完全符合你的要求：）

在jQuery同位素中重新映射后移动较小的项目以适合空白空间

1 个答案: