3

他のアイテムのサイズを変更した後、小さいアイテムを空きスペースに移動したいと思います。

これはjsfiddleでどのように見えるかです：http： //jsfiddle.net/FRH8v/

たとえば、[いいえ]をクリックした場合です。2、その上に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

まあ、それが同位体/石積みの仕組みです。

すべての「穴」を可能な限り取り除くわけではありません。私の経験から言えば、アイソトープ/石積みはタイルを押し上げるだけで、タイルを飛び越えることはありません。

あなたのフィドルでは、「5」を拡大するとき、「7」は上に上がりません.5を「飛び越える」必要があるからです.

しかし、なぜ？正確にはわかりませんが、次の 2 つの理由が考えられます。

  • 要素の順序を保持します。極端な場合、最適なアルゴリズムによってアイテムが完全にシャッフルされる可能性があります。個々のボックスのサイズを変更すると、サイズ変更中に完全に予測できないブロックの「飛び回る」ことがあります。
  • 計算の複雑さを軽減します - 詳細はこちら: http://en.wikipedia.org/wiki/Knapsack_problem#Computational_complexity

そうは言っても、packery（http://packery.metafizzy.co/）はまさにあなたが望むことをしているようです:)

于 2014-05-26T14:42:39.317 に答える