2

我的作品集位于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 因为我的情况下的边距）。

我该怎么做才能正确滚动？

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

4

2 回答 2

6

您可以使用以下技术获得项目相对于其容器的正确位置：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);
});
于 2011-11-03T17:47:38.327 回答
0

itemPositionDataEnabled 已在同位素 v2 中删除，上述答案将不再有效。

这个答案将帮助您使用基本 jQueryposition或获得相同的结果offset。

于 2015-02-20T00:50:46.700 回答