同位素添加元素 flexbox 网格

Question

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

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

工作：
- 去掉header中的同位素js文件和JS文件中的同位素js（第7到16行）
- 点击添加用户
- 用户很好地添加到网格中

这是我的 JS 片段：

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

看我的Fiddle:

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();，如果您删除所有项目，则没有 "last" 可克隆。

同位素添加元素 flexbox 网格

Isotope add element flexbox grid

jquery

jquery-ui

jquery-isotope

flexboxgrid