Question

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

我写的js回复是

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 );也会发生

这里发生了什么？

更新

似乎同位素以某种方式被卡住了......因为如果我在它之后放置警报（'测试'），它就不会被解雇。如果我在同位素召唤之前发出警报，警报就会被解雇......啊帮助

更新2

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

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

jsfiddle上的

是2个类 - item和red-item。 3个项目的简单布局与透明背景（以更好地显示问题）。单击clickme后，new-item应通过追加加入群组，然后使用同位素进行重新定位。结果显示red-item低于第一个item并且未获得isotoped。通过检查可以看出，它与我原来的问题相同，即原始项目得到了原样，但新的附加项目没有。

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

更新3

解决方案（部分）是用$（）像这样吞没newthumbs

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是对象的引用

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

3 个答案: