5

我正在尝试通过 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并且没有同位素。通过检查可以看出它与我原来的问题相同，即原来的项目得到同位素，而新的附加项目没有。

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

更新 3

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

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

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

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

在这个破碎的小提琴上，我添加了类似于渲染助手在 Rails 上的操作方式的 div，其中添加了 \n \t 等等。这似乎不起作用。

我试图弄清楚如何使它工作..

4

3 回答 3

8

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

http://jsfiddle.net/cR7WP/

当你说：

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

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

于 2013-09-25T15:47:40.137 回答
4

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

var item = $(e);
setTimeout(function() {
  CSP.grid.append(item).isotope('appended', item);
}, 50); // fixes an overlay bug
于 2018-04-15T14:02:03.093 回答
1

这对我有用

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

于 2012-12-23T13:20:24.600 回答