jquery同位素 - 触发布局仅在初始加载时完成回调

时间:2014-12-27 23:09:57

标签: jquery-isotope

我正在使用Isotope Plugin。在触发滚动方法之前,我需要等到文档固定在固定高度上。这意味着我需要等到Isotope完成它的工作。我有两个叫同位素的电话;一旦在初始文档加载,再次将其绑定到单击处理程序。我有回调工作..但只有点击处理程序。但是我需要将它绑定到初始加载,而不是单击处理程序。

这是我的代码:

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;
    }); 

我正在使用Isotope版本v2.1.0。

1 个答案:

答案 0 :(得分:0)

我在这里遇到了同样的问题。

所以如果有人想知道我是怎么做到的,那就去看看吧。

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');