在附加项目时，同位素不reLayout

Question

我试图通过ajax请求在Rails上向容器添加新的项目(下面提供了解释的小提琴)

我写的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 );也会发生这种情况。

这里发生什么事情？

更新

同位素似乎被卡住了..。因为如果我把警告(‘测试’)之后，它不会被解雇。如果我在同位素呼叫之前发出警报，警报就会被发射.啊救命

更新2

我做了一个显示问题的小提琴。这很简单，但我认为问题也很简单--我只是错过了一些重要的事情。

篡改解释及其与我原来的问题：的关系

小提琴上有两类-- item和red-item.一个简单的布局3个项目的透明背景(以更好地显示问题)。一旦clickme被点击，一个new-item应该通过附加加入到这个组中，然后用同位素重新组合。结果显示，red-item低于第一个item，没有同位素。通过检查可以看出，这和我原来的问题是一样的，就是原来的项目是同位素的，而新的附加的项目却没有。

希望我说得很清楚，希望有人能帮助我，证明我是理智的。谢谢。

更新3

解决方案(部分)是用$()吞没新闻，如下所示

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

不过，我还是对此有意见。

在这个小提琴上，我添加了解决方案，所以每次都添加2 div。

在这个折断的小提琴上，我在Rails上添加了divs，它添加了\n \t等等。这似乎不管用。

我在努力想办法让它运转起来。

Answer 1

我有同样的问题，你和我用你的小提琴找到解决办法。我认为问题是，在你附加新的项目后，你需要给同位素一个参考这些插入的项目。

http://jsfiddle.net/cR7WP/

当你说：

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

创建了两个独立的div元素；一个元素实际上是附加的，另一个元素是片段，同位素试图布局。附加的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是对象的引用