0

我是新来的（没有编码员，我是建筑师），但在过去的几个月里，我经常浏览这个地方，以找到解决我在为我们的建筑办公室建立新网站时遇到的几个问题的解决方案。该网站已经在线，但我仍然有一个问题，我想解决它，让它像我想要的那样工作。

在该站点中，我在几个地方以不同的方式使用了 jquery Isotope。但是对于我们的新闻部分，我使用同位素来显示可用的新闻站点。newsitem 由 xml 文件填充，当您单击图像时，newsitem 将放大并添加额外的文本信息，以及图像按钮等。因为项目正在扩大，所以需要重新布局光栅，并且经常在重新布局后新闻项目会移出视野。

为了解决这个问题，我想滚动到目标项目，然后再次关注它。我使用 Ariel Flesher 的 Jquery.ScrollTo 插件来解决这个问题（这在我们网站的投资组合部分非常有用）。问题是我不知道要滚动到哪个坐标。目前我正在使用使用图像的顶部作为占位符，这似乎很好，但是当我在重新布局命令之后设置滚动命令时，它仍然滚动到图像的旧位置，而不是重新滚动到的位置布局。

所以简而言之，我的问题是，如何在重新布局后获得新坐标，以将它们提供给滚动功能？

//          change newsitem from small to big
        $container.delegate('.element.crid_1 .img_container','click',function(){
            /* img src */               
            var ori = $('img', this).attr('src');
            if(ori != undefined){
                var string = $('img', this).attr('src');
                var bigpicture = string.truncate(-6)
                $('img', this).attr('src',bigpicture +'01.jpg');
                $('img', this).attr('width',512);
                $('img', this).attr('height',512);
            } 
            $(this).parent().toggleClass('featured not_featured');
            txt_height = $(this).parent().find('.text').height();                           
            new_height = manage_txt_heights(txt_height);    
            $(this).parent().find('.text').css({"height" : new_height + "px" });

            $container.isotope('reLayout');

            var imgoffset=$('img', this).offset().top ;
            var calculation = '+='+imgoffset+'px';
            $('#nieuwswrapper').scrollTo(calculation,800);
        });

上面的代码是我用来放大newsitem的，在重新布局命令之后，我已经为滚动行为添加了行。其中值 800 是滚动速度。

整个“工作”网页可在此处获得网站新闻部分

提前感谢您的任何建议。简

4

1 回答 1

0

您可以激活 ItemPositionData：

$('#container').isotope({
  itemSelector: '.element',
  itemPositionDataEnabled: true
})
// log position of each item
.find('.element').each(function(){
  var position = $(this).data('isotope-item-position');
  console.log('item position is x: ' + position.x + ', y: ' + position.y  );
});

http://isotope.metafizzy.co/docs/options.html#itempositiondataenabled

于 2013-08-17T19:38:26.197 回答