Question

我的投资组合位于http://www.visualise.ca/，我正在研究运行同位素的新版本。它可以在http://themes.visualise.ca/visualise获得。

当我点击将在页面中加载帖子的图片缩略图时，我希望页面使用jQuery scrollTo插件和以下代码滚动到项目（单击的图像缩略图）：

$container.delegate( $itemString, 'click', function(){
        $(this).toggleClass('large');
        $container.isotope('reLayout');
        $('html,body').scrollTo(this, 800);
});

但是在测试之后，似乎项目的位置总是顶部：1左：容器的1（如果项目没有1px边框，则为0）。此外，当我使用Firebug检查项目时，突出显示的蓝线不在项目本身上，而是位于顶部：1左侧：容器中的1个。

所以我怀疑因为同位素所有的插件现在都认为所有的项目都位于0,0（因为我的边缘是1,1）。

为了正确滚动，我该怎么办？

非常感谢您的时间和帮助。

Answer 1

您可以使用以下技术获取项目相对于其容器的正确位置：在选项中设置itemPositionDataEnabled: true，并使用.data('isotope-item-position')获取位置。为您的代码

$container.isotope({
  // options...
  itemPositionDataEnabled: true
});

$container.delegate( $itemString, 'click', function(){
  var $this = $(this),
      itemPosition = $this.data('isotope-item-position');
  $this.toggleClass('large');
  $container.isotope('reLayout');
  $('html,body').scrollTo( itemPosition.y, 800);
});

Answer 2

itemPositionDataEnabled has been removed in v2 of Isotope并且上述答案将不再有效。

This answer将使用position或offset帮助您使用基本jQuery获得相同的结果。

scrollTo同位素插件

2 个答案: