Shuffle.js로 마지막으로 추가 된 div 만 대상으로 지정

Question

"추가로드"버튼이 있습니다.이 버튼을 클릭하면 검색 결과 페이지에 새 컨테이너가 추가됩니다. 각 컨테이너는로드 할 항목 수에 따라 반복하는 클래스 (예 : .results-1 .results-2.results-3)를 가져옵니다.

"추가로드"를 클릭하면 새로 추가 된 항목뿐만 아니라 모든 결과가 화면에 깜박입니다. 이는 내 코드가 추가 된 것뿐만 아니라 벽돌 그리드의 모든 항목을 감지하기 때문입니다.

$('.gallery-photo [class of only most recent append goes here?]').each(function() { 

가 어떻게 가장 최근에 추가 된 항목을 타겟팅 할 수 있습니다, 각각의 새로운 용기가 반복 클래스를 얻을 때 :

이 줄은 생각 문제인가?

모든 아이디어를 매우 높이 평가합니다. 다음은 PHP가없는 fiddle의 예입니다.

$(function() { 
    $(".gallery-photo").slice(0, 4).show(); 
    $("#loadMore").on('click', function(e) { 
    e.preventDefault(); 
    $(".gallery-photo:hidden").slice(0, 4).fadeIn(); 
    $('.gallery-photo').each(function() { 
     var $newRow = $(this); 
     $('.masonry-gallery').append($newRow); 
     $('.masonry-gallery').shuffle('appended', $newRow); 
    }); 
    }); 
}); 

$(document).ready(function() { 
    var $grid = $('.masonry-gallery'); 
    $grid.shuffle({ 
    itemSelector: '.gallery-photo' // the selector for the items in the grid 
    }); 
}); 

P. 이 석조 격자는 shufflejs을 사용합니다. 비슷한 대화 here은 새 항목을 그리드에 추가하는 데 동일한 코드를 사용합니다. 당신이 지적

Answer 1

는, 문제는 당신이 희미 단지 요소가 아닌 모든 요소를 ​​추가한다는 것입니다.

그 문제를 해결하려면, 당신은.fadeIn() 방법 후 .each() 방법을 을 체인 수 순서는 새로 표시되는 모든 요소를 ​​반복 및 셔플 업데이트를 트리거하려면

Updated Example

$("#loadMore").on('click', function(e) { 
    e.preventDefault(); 

    $(".gallery-photo:hidden") 
    .slice(0, 4) 
    .fadeIn() 
    .each(function() { 
     $('.masonry-gallery').shuffle('appended', $(this)); 
    }); 
}); 

---

을

아래의 의견을 바탕으로 다른 요소에서 요소를 추가하는 또 다른 대체 예가 있습니다 (이 경우 추가되는 요소가 포함 된 #elements-to-append이라는 컨테이너 요소가 있음). 당신이 셔플 큐에 새로 추가 된 요소를 추가하기 위해 셔플 .add() 방법을 사용할 수 있도록

var $gallary = $('.masonry-gallery'); 
$gallary.find('.gallery-photo').show(); 

var shuffle = new window.shuffle($gallary.get(0), { 
    itemSelector: '.gallery-photo' 
}); 

$("#loadMore").on('click', function(e) { 
    e.preventDefault(); 
    var $elementsToAppend = $('#elements-to-append').children(); 

    $gallary.append($elementsToAppend); 
    $elementsToAppend.fadeIn().each(function(_, element) { 
    shuffle.add([element]); 
    }); 
}); 

Updated Example

나는 원래 셔플 스크립트와 jQuery를 스크립트를 대체했다.