即使在重新加载或重新布局之后，jQuery 同位素也会重叠元素答案

【问题标题】：jquery isotope overlapping elements even after reloading or relayoutting即使在重新加载或重新布局之后，jQuery 同位素也会重叠元素
【发布时间】：2013-05-20 06:10:22
【问题描述】：

我有一个函数，比如 functionForAjaxRequestAndDisplayData(...)，它执行 ajax 调用并将数据写入/附加到 html。

当我跟随时，一切正常；

$(document).ready(function() {
    functionForAjaxRequestAndDisplayData(...);
    functionForAjaxRequestAndDisplayData(...);
    :
    functionForAjaxRequestAndDisplayData(...);
});

function functionForAjaxRequestAndDisplayData(...){
    :
    $('#container').append(ajaxresponseElement);      
}

function applyIsotop(){
    isotopIntialized = true;
    $('#Feeds').imagesLoaded( function(){
        $('#Feeds').isotope({
          sortBy : 'random',
          layoutMode: 'masonry',
          itemSelector : '.Feed'
        });
    });
}

$(window).load(function(){
    applyIsotop();
});

但是执行如此多的 ajax 请求会使页面加载速度变慢。由于 jQuery 同位素砌体被应用于 $(window).load();即加载后，因此应用砌体视图的延迟在屏幕上清晰可见。

为了克服这个问题，我决定将 ajax 函数调用分为以下两部分；

$(document).ready(function() {
    functionForAjaxRequestAndDisplayData(...);
    functionForAjaxRequestAndDisplayData(...);
    functionForAjaxRequestAndDisplayData(...);
    functionForAjaxRequestAndDisplayData(...);
});

function loadRest(){
    functionForAjaxRequestAndDisplayData(...);
    functionForAjaxRequestAndDisplayData(...);
    :
    functionForAjaxRequestAndDisplayData(...);
}

$(window).load(function(){
    applyIsotop();
    loadRest();
});

function functionForAjaxRequestAndDisplayData(...){
    :
    if(isotopIntialized == false){
                $('#container').append(ajaxresponseElement);
          }else{
              $('#container').append(ajaxresponseElement).isotope( 'insert',$(ajaxresponseElement),function(){
                    $('#container').isotope( 'reLayout')
              })
          }
}

但是这种解决方案导致容器中的元素重叠。如果我在添加或插入项目后使用“reLayout”，所有列中的所有元素都会重叠。如果我在添加或插入项目后使用“reloadItems”，第一列中的某些元素会重叠。但是，当我使用同位素过滤器时，所有项目都会正确重新对齐。

我尝试如下调用同位素过滤器；

$(window).load(function(){
    applyIsotop();
    loadRest();
    wait(1000);
    $('#container').isotope({ filter: '*' });
});

但它也可以工作，因为它在所有 ajax 调用完成之前执行。

【问题讨论】：

当我定义filter : '*' 同位素属性时，我遇到的重叠更少。

标签： jquery jquery-isotope

【解决方案1】：

使用以下代码摆脱重叠问题：

$container.append(divs).isotope('appended', divs, function () {
    $container.isotope('reLayout');
});

【讨论】：

7 年前，仍然可用于加载外部资源，例如 shopify 的按钮按钮。