0

我正在尝试在被单击的项目下直接添加一个全宽项目。我尝试了两种方法（在这里小提琴）。

这是可能吗？

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

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

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

于 2013-02-05T17:31:25.277 回答