我正在使用同位素来布局页面上的某些 block 。我的页面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 中替换同位素容器的情况下使用任何类似的示例,只能替换其中的内容。我替换整个内容的原因是因为其中有更多内容(过滤器等)需要加载。
有人可以建议如何让它工作吗?
非常感谢。
最佳答案
您必须重新获取目标元素,您无法再次重复使用容器
,它不知道新加载的元素!
$('.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
});
});
关于jquery - 让 Isotope 在 AJAX 加载的容器上工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26163399/