Packery에 항목을 동적으로 추가합니다. 정확히 어떻게 작동합니까?

Question

Ajax가 반환 한 항목을 Packery에 추가하고 현재 항목을 제거하고 새 항목을 레이아웃하려고합니다. http://codepen.io/anon/pen/Cnbxu/

그러나, 내 코드의 경우 내가 만들 필요가 없습니다 :

나는

이 정확한 기능은 내가 원하는 것이 Metafizzy (개발자)에서 갈래 펜 codepen 작업이 내가 이미 생성 된 요소 배열로 작업 중이므로 items 배열을 추가하거나 DOM에 추가하십시오.

다음은 내가 사용하는 코드 샘플입니다.

$.post(ajax_vars.ajaxurl, { action: 'function', param : param }, function(data){ 

    if(data == '' || data == 'undefined' || data == 'No More Posts' || data == 'No $args array created'){ 
     data = ''; 
    }  
    //gather current Packery elements 
    var elToRemove = pckry.getItemElements() 
    // append elements to container 
    container.append($(data)); 
     console.log(elems); 
    // add and lay out newly appended elements 
    pckry.addItems($(data)); 

    pckry.remove(elToRemove); 
    packery.layout(); 
     elems = pckry.getItemElements(); 
    console.log(elems); 

    } 
}); 

요소가있는, CONSOLE.LOG은 ($는 (데이터))의 응답을 나타내고, I는 속성을 확인할 때의 용기 내부 DIV 반환 요소를 볼 수있다. 문제는 내가 무엇을 하든지 Packery가 새 항목을 인식하고 이에 따라 레이아웃을 얻을 수 없다는 것입니다. elems는 빈 값을 반환합니다. addItems(), preppended() 및 appended() 메소드를 사용하지 않았습니다.

어떤 도움이 필요합니까?

Answer 1

먼저 append를 호출 한 다음 해당 호출이 추가 된 후 매우 까다로워 야합니다. 내가

var elems = []; 
    var elem = document.createElement('div'); 
    elem.innerHTML = "<img src='http://placehold.it/1000X500'></div>" 
    elem.className = 'item' 
    //add your element to the arrays, you can add multiple here 
    elems.push(elem) 
    // append elements to container 
    container.append(elems); 
    // add and lay out newly appended elements 
    container.packery('appended', elems); 

를 작동하는 그것을 가지고 어떻게 여기

입니다