Question

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

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

要解决这个问题，我想滚动到目标项目，然后再次关注它。我使用Ariel Flesher的Jquery.ScrolTo插件来解决这个问题（这在我们网站的投资组合部分工作得很好）。问题是我无法确定要滚动到哪个坐标。目前我使用所用图像的顶部作为占位符，这看起来很好，但是当我在重新布局命令之后设置我的滚动命令时，它仍然滚动到图像的旧位置，而不是重新布局后的位置。布点。

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

//          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是滚动速度。

整个“工作”网页可在此处website newssection

获取

提前感谢任何建议。扬

Answer 1

您可以激活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

jquery同位素 - 滚动到中心单击放大的项目

1 个答案: