Question

我使用Isotope进行页面上某些块的布局。我的页面HTML结构可以简化如下：

<nav>
    <a href="/page1.htm">Page 1</a>
    <a href="/page1.htm">Page 1</a>
    <a href="/page1.htm">Page 1</a>
</nav>
<div class="main-content-container">
    <div class="main-content">
        <div class="blocks">
            <div class="block">Block 1</div>
            <div class="block">Block 2</div>
            <div class="block">Block 3</div>
            <div class="block">Block 4</div>
            <div class="block">Block 5</div>
        </div>
    </div>
</div>

同位素是这样初始化的（我使用jQuery）：

$(function(){
    var container = $('.blocks');
    container.isotope({
        itemSelector: '.block',
        masonry: {
            columnWidth: 220,
            gutter: 20
        },
        itemPositionDataEnabled: true
    });
});

这很有效。

但是，我希望从不同的网页中提取内容，使用完全相同的结构类型，并将其用作“同位素内容”。

我正在使用jQuery load()加载这样的内容：

$('nav a').click(function(){
    var link = $(this).attr('url');
    $('.main-content-container').load(link + ' .main-content', function () {

        // Content loaded, so re-init Isotope:
        container.isotope({
            itemSelector: '.block',
                masonry: {
                    columnWidth: 220,
                    gutter: 20
                },
            itemPositionDataEnabled: true
        });

    });
});

同样，这在将外部页面中的内容加载到当前页面时非常有效。它只是替换了main-content容器中的所有内容，这就是我想要的。然而，同位素的重新初始化并不起作用。它没有错误，它只是没有做任何事情。

在加载AJAX内容之前，我已经尝试在点击Isotope的实例上执行destroy。我也尝试在同步AJAX成功回调中重新初始化Isotope（而不是异步，这是load所做的。

没有任何作用，我不能在AJAX中替换同位素容器的任何类似的例子，只有在其中的内容被替换的地方。我替换整个事情的原因是因为其中有更多的内容（过滤器等）需要加载它。

有人可以建议如何让这个工作吗？

非常感谢。

Answer 1

你必须重新抓住你的目标元素，你不能再次使用container，它不知道新装载的元素！

$('.main-content-container').load(link + ' .main-content', function () {

    // Content loaded, so re-init Isotope:
    container = $(".blocks"); //grab newly loaded elems
    container.isotope({
        itemSelector: '.block',
            masonry: {
                columnWidth: 220,
                gutter: 20
            },
        itemPositionDataEnabled: true
    });

});

让Isotope处理加载AJAX的容器

1 个答案: