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

Question

我试图通过Rails上的ajax请求将新项添加到容器中(jsfiddle以及解释如下)

我写的我的回应是

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

一旦附加了新项目,我似乎遇到了某种问题.一旦项目依赖,同位素似乎没有开火,我留下了最初isotoped的项目和没有isotoped的新项目.

这是我的一个例子(我有几个isotoped项目,然后直接几个新的unisotoped项目)

<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 );,以及

这里发生了什么？

更新

似乎同位素以某种方式被卡住了......因为如果我在它之后放置警报('test'),它就不会被解雇.如果我在同位素召唤之前发出警报,警报就会被解雇......啊,求助

更新2

我做了一个显示问题的jsfiddle.这很简单,但我认为问题也很简单 - 我只是错过了重要的事情.

jsfiddle解释以及它与我原始问题的关系:

在jsfiddle是2级 - item和red-item.3个项目的简单布局与透明背景(以更好地显示问题).一旦clickme点击一个new-item应该通过追加加入该组,然后用同位素recombabulized.看到的结果是它red-item低于第一个item并且没有得到isotoped.通过检查可以看出,它与我原来的问题是相同的,即原始项目是isotoped,但新的附加项目没有.

希望我说清楚,有人能够帮助我并证明我是理智的.谢谢.

更新3

解决方案(部分)是像这样吞噬newthumbs和$()

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

不过我还是有问题..

在这个jsfiddle我添加了解决方案,并且make是每次添加2 div.

在这个破碎的小提琴上,我添加了类似于Rails渲染帮助器的div,它添加了\n\t等等.这似乎不起作用.

我想弄清楚如何让它工作..

Answer 1

我遇到了和你一样的问题,我用你的小提琴找到了解决方案.我认为问题在于,在追加新项目之后,您需要为同位素提供对这些插入项目的引用.

http://jsfiddle.net/cR7WP/

当你说:

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

创建了两个独立的div元素; 一个实际上是附加的,一个是片段,Isotope试图布局.附加的div永远不会传递给布局函数.

Answer 2

这对我有用

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

items 是一堆 div

这里我添加了多个项目，所以我将其放入循环中，$container是对象的引用