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

Question

我试图通过Rails上的ajax请求将新项目附加到容器(下面提供了解释)

我写的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

我已经做了一个显示问题的文件。这很简单，但我认为问题也很简单——我只是错过了一些重要的东西。

jsfield解释以及它与我最初的问题的关系:

在jsfiddle是2类- item和red-item。一个简单的3个项目的透明背景布局(以更好地显示问题)。一旦点击了clickme, new-item就会通过追加加入到该组中，然后与同位素重新组合。结果可以看出，red-item低于第一个item，并且没有被同位素化。通过检查可以看出，这与我最初的问题相同，即原始项目被同位素化，但新附加的项目没有。

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

更新3

解决方案(部分)是使用$()将newthumbs吞没，如下所示

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

但是我仍然有一个问题…

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

在这个破碎的小提琴上，我添加了类似于Rails上渲染助手的div，它添加了n t等等。这似乎行不通。

我正在想办法让它工作

Answer 1

我和你有同样的问题，我用你的小提琴找到了一个解决方案。我认为问题在于，在你添加新项目之后，你需要为插入的项目提供同位素参考。

http://jsfiddle.net/cR7WP/

当你说:

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

创建两个独立的div元素;一个是附加的，另一个是碎片，同位素试图布局。附加的div不会传递给layout函数。

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

///relayout

  $container.isotope( options ,function(){
        //u can remove some items if u want
  });

项是一堆div

这里我添加了多个项，所以我把它放入循环中，$container是对象