0

クリックされているアイテムの直下に全幅のアイテムを追加しようとしています。私は2つの方法を試しました（ここでフィドル）。

これはまったく可能ですか？

私が試した最初の方法は、アイテムがクリックされた直後に新しいアイテムを挿入することでした。行の最後の項目でない場合、クリックされた項目の後に空のギャップが作成されます。

    // First try (looks at DOM)
    if (currentPosition.y === nextPosition.y) {
        insertStudentContent($puff.next());
    } else {

        $puff.after($studentContent);
        $container.isotope('reloadItems').isotope({ sortBy: 'number' });
    }

2 番目の方法は、クリックした項目の行の最後の項目の直後に項目を挿入することでした。この方法もフェイルセーフではありません。クリックされたアイテムと追加されたアイテムの間にアイテムが入ることがあります。

    $container.find('.puff').each(function (index) {
        // is the item (.puff) on the same row as the one being clicked?
        if ($(this).data('isotope-item-position').y === currentPosition.y) {
            // The last item on the row of the clicked item will be $puff
            $puff = $(this);
        }
    });
    $puff.after($studentContent);
    $container.isotope('reloadItems').isotope({ sortBy: 'number' });
4

1 に答える 1

1

私はそれを理解し、答えは多くのifステートメントでした：

    var insertStudentContent = function ($puff) {
    var currentPosition = $puff.data('isotope-item-position');
    var upToClickedFlag = 0;
    $container.find('.puff').each(function (index) {
        if (currentPosition.y === $(this).data('isotope-item-position').y && $(this).height() === 300) {
            $(this).removeClass('big').addClass('small');
        }

        if (upToClickedFlag && currentPosition.y === $(this).data('isotope-item-position').y) {
            if ($(this).prev().data('isotope-item-position').y === $(this).data('isotope-item-position').y) {
                $puff = $(this);
            }
        }

        if ($(this)[0] === $puff[0]) {
            upToClickedFlag = 1;
        }

    });
    $puff.css('opacity', '.5');

    $puff.after($studentContent);
    $container.isotope('reloadItems');
    $container.isotope({ sortBy: 'original-order' }).isotope('reLayout');
};

新しい機能があります。私が望むように、これは100パーセント機能しません。140x140px のアイテムは、技術的には dom の最後のアイテムですが、石積みでは 2 番目に配置できます。140x10 のアイテムが行の最後のアイテムである場合、小さな (140px) ギャップが生じます。これを修正するには、同位体がどのように機能するかの基本を変更する必要があるため、代替手段ではありません. 更新されたフィドル。

于 2013-02-05T17:31:25.277 に答える