jquery 동위 원소 - 발사 layoutComplete 초기로드에서만 콜백

Question

Isotope Plugin을 사용하고 있습니다. 스크롤 메서드를 실행하기 전에 문서가 고정 된 높이로 고정 될 때까지 기다려야합니다. 이것은 Isotope가 그 일을 끝내기까지 기다려야 함을 의미합니다. 동위 원소에 대한 두 번의 전화가 있습니다. 최초 문서로드시 한 번 클릭하고 다시 클릭 핸들러에 바인딩합니다. 나는 콜백 함수를 가지고있다. 그러나 클릭 핸들러에서만. 그러나 나는 그것을 초기로드에 바인딩해야하며 클릭 핸들러는 아니다. 내가 동위 원소 버전 V2.1.0을 사용하고

var active   = $(".tour-filter li a").first(); 
var defaultFilter = active.data('filter'); 

active.addClass('active'); 

    var container = $('.tour-list'); 
    container.isotope({ 
     filter: defaultFilter, // I need to bind the 'layoutComplete' callback HERE, so it only fires once on the page load 
     layoutMode: 'fitRows' 
    }); 

container.isotope('on', 'layoutComplete', function (isoInstance, laidOutItems){ 
    alert('done!'); 
}); 

    $('.tour-filter a').click(function(){ 
     $('.tour-filter .active').removeClass('active'); 
     $(this).addClass('active'); 

     var selector = $(this).attr('data-filter'); 

     container.isotope({ 
      filter: selector,  // ...But it is binding itself here? 
      layoutMode: 'fitRows' 
     }); 
     return false; 
    }); 

:

여기 내 코드입니다.

Answer 1

여기에도 같은 문제가 있습니다.

아무도 내가 이것을 어떻게했는지 알고 싶다면 한번보세요.

var jGrid = jQuery('.grid'); 

//callback function 
var initTiles = function initTiles (obj, objArray) 
{ 
    console.log(obj, objArray); 
}; 

jGrid.isotope(
{ 
    itemSelector: '.tile', 

    //disable layout on initialization 
    isInitLayout: false, 

    masonry: 
    { 
     columnWidth: 218, 
     isFitWidth: true, 
     gutter: 2 
    } 
}); 

//wait for the layoutComplete event 
jGrid.isotope('on', 'layoutComplete', function (objArray) 
{ 
    //callback ... 
    for(var i = 0; i < objArray.length; i++) 
    { 
     var obj = objArray[i]; 

     initTiles(obj, objArray); 
    } 
}); 

//trigger the layout method to trigger layoutComplete 
jGrid.isotope('layout');