Question

我有类似this的例子，排序效果很好。到目前为止，我可以看到同位素使用某种缓存，然后使用CSS规则，它在最终视图中对所有内容进行排序。但它实际上并没有对DOM进行排序，因此焦点循环不能按预期工作。除了自己对DOM进行排序之外，我还能做些什么来解决这个问题吗？

Answer 1

最后，我的解决方案是使用他的绝对位置计算每个元素的tabindex。

function sortFocus(sortClass) {
    var button = $('div.isotope-button').first() ;       

    setTimeout(function() {
        $('div.isotope-button.' + sortClass).each(function(index) {
            var pos = $(this).position(), posx = (pos.left) / button.outerWidth(), posy = ((pos.top) / button.outerHeight()) + 1;
            $(this).find('a').attr('tabindex', posy + '' + posx);
        });
    }, 1000);
}

一些想法：

同位素插件在动画后没有回调函数。
假设所有按钮的大小相同，则计算基于按钮的大小。我不知道是否有不同尺寸的作品
就我而言，每个同位素按钮都有一个内链接。

Answer 2

这也有效，filterItems总是以正确的顺序返回。

$myIsotope.on('arrangeComplete', function (e, filteredItems) {
  var tabIndex = 1;
  $(filteredItems).each(function (index, item) {
    $(item.element).find('a.title').attr('tabindex', tabIndex);
    tabIndex++;
  });
});

循环焦点并用同位素分类

2 个答案: