附加项目时同位素不会重新布局

Question

我正在尝试通过 Rails 上的 ajax 请求将新项目附加到容器中（jsfiddle 解释如下）

我写的js回复是

var $newthumbs = "..new items..";
$('#homepage_thumbnails').append( $newthumbs );
$('#homepage_thumbnails').isotope( 'appended', $newthumbs );

添加新项目后，我似乎遇到了某种问题。 附加物品后，同位素似乎不会触发，我只剩下最初同位素的物品和未同位素的新物品。

这是我所拥有的一个例子（我有几个同位素项目，然后直接在几个新的非同位素项目之后）

<div id="homepage_thumbnails" class="thumbnails isotope" style="position: relative; overflow: hidden; height: 720px;">
<div class="thumbnail-item isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 480px, 0px);">
...
</div>
<div class="thumbnail-item thumbnail span2">
    ...
</div>
</div>

注意$('#homepage_thumbnails').isotope( 'insert', $newthumbs ); 也会发生这种情况

这是怎么回事？

更新

同位素似乎以某种方式卡住了..因为如果我在它后面加上 alert('test') ，它就不会被解雇。如果我在同位素调用之前发出警报，警报就会被触发......啊啊帮助

更新 2

我已经创建了一个 jsfiddle 来显示问题。这很简单，但我认为问题也很简单——我只是错过了一些重要的事情。

jsfiddle 解释以及它与我原来的问题的关系：

在 jsfiddle 上有 2 个类 - item 和 red-item。具有透明背景的 3 个项目的简单布局（以更好地显示问题）。单击clickme 后，new-item 应通过附加加入组，然后用同位素重新组合。所见的结果是red-item 低于第一个item 并且没有同位素。通过inspect可以看出，这和我原来的问题一样，就是原来的项目有同位素，而新的附加项目没有。

希望我说清楚了，希望有人能够帮助我并证明我的理智。谢谢。

更新 3

解决方案（部分）是像这样用 $() 吞噬新拇指

var $newthumbs = $("..new items..");

但是我仍然有这个问题..

在这个jsfiddle 上，我已经添加了解决方案，并且每次都添加了 2 个 div。

在这个broken fiddle 上，我添加了类似于渲染助手在Rails 上的作用的div，其中添加了\n \t 等等。这似乎不起作用。

我正在想办法让它工作..

Answer 1

我和你有同样的问题，我用你的小提琴来寻找解决方案。我认为问题在于，在添加新项目后，您需要为同位素提供对这些插入项目的引用。

http://jsfiddle.net/cR7WP/

当你说：

element.append( '<div />' ).isotope( 'appended', $('<div />') )

创建了两个单独的 div 元素；一个是实际附加的，另一个是 Isotope 尝试布局的片段。附加的 div 永远不会传递给布局函数。

Answer 2

我知道该线程很旧，但这是我的解决方案。同位素似乎无法立即渲染容器：

var item = $(e);
setTimeout(function() {
  CSP.grid.append(item).isotope('appended', item);
}, 50); // fixes an overlay bug

Answer 3

这对我有用

$container = $('#browsecontainer');

$isotope = $container.isotope({
    getSortData: {
      },
      alphabetical: function( $elem ) {
        var name = $elem.find('.name'),
            itemText = name.length ? name : $elem;
        return itemText.text();
      }
    }
  });  


    //// to append items
    var isotopeData = $container.data('isotope');
    for(var item in items)
    {
            $newItem = $(items[item]);
            $container.append( $newItem ).isotope( 'appended', $newItem );
    }

///重新布局

  $container.isotope( options ,function(){

        //u can remove some items if u want
  });

项目是一堆 div

这里我添加了多个项目，所以我在循环中使用它，$container 是对象的引用