同位素添加元素 flexbox 网格

Question

我的项目几乎完成了，只有一件事无法正常工作。我使用 Isotope 删除项目，这非常有效。该项目被删除，下一个项目滑入它的位置。现在我想将项目添加到网格中。如果我删除 Isotope 功能，一切正常，但我希望它与 Isotope 一起工作（因为很好的过渡等）。如果我使用我当前的代码，除了最后一项（它被克隆但没有添加到网格中）之外，什么都不会发生。

重现问题：
- 点击添加用户
- 什么都没有发生

工作：
- 从头文件中删除同位素js文件，从JS文件中删除同位素js（第7至16行）
- 点击添加用户
- 用户被很好地添加到网格中

这是我的 JS 的 sn-p：

  $('.js-add-user').on( 'click', function(e) {
    e.preventDefault();
    $('.js-grid-item:last').clone().insertAfter($('.js-grid .js-grid-item:last'));
});

看我的小提琴：

https://jsfiddle.net/r3c05odv/3/

谁能帮帮我？

Answer 1

可以使用isotope的append方法：

$('.js-add-user').on( 'click', function(e) {
    e.preventDefault();
    var $items = $('.js-grid-item:last').clone();
 // append items to grid
 $grid.append( $items )
// add and lay out newly appended items
  .isotope( 'appended', $items );   
 });

唯一的问题是，由于您使用$('.js-grid-item:last').clone();，如果您删除所有项目，则没有“最后一个”可以克隆。