同位素排序回调函数

时间:2014-09-19 18:51:19

标签: javascript jquery jquery-isotope

我正在使用Isotope jquery插件按名称或日期对列表中的多个文件进行排序。同位素函数运行完美,但我需要在排序后运行回调函数,我无法确定触发它的位置。

到目前为止,这是我的同位素代码:

function animationFinished() {
    $('#isotope-container a').each(function(index, element) {
        var top = parseInt($(element).css('top')); console.log(top);
    });
}

var $container = $('#isotope-container').isotope({
    getSortData: {
        name: '[title]',
        date: function( itemElem ) { // function
          var date = $( itemElem ).attr('year');
          return parseInt(date);
        }
    }
});
$('#sorting').change( function() {
    //console.log('click');
    var sortByValue = $(this).find('option:selected').attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
});

以下是正在排序的html的一个小例子

<div id="sorts" class="button-group">
  <p>Sort by:
  <select id="sorting">
    <option data-sort-by="name">Name</option>
    <option data-sort-by="date">Date</option>
  </select></p>
</div>

<div id="isotope-container">
<a title="Army Corps of Engineers" year="2009" href="/army-corp-of-engineers-tom-river-rehab-nj-2009/">Army Corp of Engineers</a>
<a year="1999" title="Bolted Steel NSF Tank A6 &amp; A7" href="/bolted-steel-nsf-tank-a6-a7-houston-1999/">Bolted Steel</a>
<a year="1998" title="Brick Manhole Raven 405" href="/brick-manhole-raven-405-charleston-1998/">Brick Manhole</a>
<a year="9999" title="Wetwell Vault Rehab" href="/wetwell-vault-rehab/">Wetwell Vault</a>
</div>

1 个答案:

答案 0 :(得分:1)

同位素v2

http://isotope.metafizzy.co/events.html

$container.isotope( 'on', 'layoutComplete', function(){ … } ); //only set this up once

$container.isotope({ sortBy: sortByValue });

同位素v1

http://isotope.metafizzy.co/v1/tests/callbacks.html

$container.isotope({ sortBy: sortByValue }, function(){ … });