Question

我尝试在正在点击的项目下直接添加全宽度项目。我尝试了两种方法（fiddle here）。

这一切都可能吗？

我尝试的第一种方法是在点击项目后直接插入新项目。如果点击的项目不是行上的最后一项，则会在单击项目之后产生空白。

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

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

第二种方法是直接在点击项目的行的最后一项之后插入项目。这种方法也不是安全的。有时项目在被点击的项目和正在添加的项目之间。

    $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' });

Answer 1

我明白了，答案很多，如果陈述：

    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');
};

有新功能。这不是百分百，因为我想。 140x140px项目在技术上可以是dom中的最后一项，但在砌体中排在第二位。当140x10项目是行中的最后一项时，这会产生一个小的（140px）间隙。为了解决这个问题，我必须改变同位素工作方式的基本原理，这是不可替代的。 An updated fiddle.

将全宽度项目插入同位素布局

1 个答案: