Masonry -滚动到layout -infinite上单击的元素

Question

我正在尝试做两个动作在一个点击的元素使用砖石库。它的工作方式应该是，当我单击元素时，它会展开(我正在添加类以使框更大)，同时页面会滚动到该框。问题是，当您展开框时，它可能会向下拉出一行，这意味着调用滚动的函数将滚动到错误的位置。它应该进行布局，并获得元素的新位置，然后移动...

我几乎把它弄好了。它正在扩展框并进行新的布局，完成后将页面滚动到框中……但它看起来有点奇怪，它首先移动新布局的所有框，然后停止并连续移动页面。我更希望这一步就能完成。这是可能的。

下面是我的代码：

$(document).ready(function() {


    var $container = $('#container');
    // initialize

    var msnry = new Masonry( container, {
        columnWidth: 280,
        itemSelector: '.item'
    } );



    $('.openBoks').on('click', function() {

                    // this is my element
                    var thisBox = $(this).parent().parent();

                    // adding the class to expand it
                    thisBox.addClass('opened');

                    // calling method to do new layout
                    msnry.layout();


            msnry.on( 'layoutComplete', function( msnryInstance, laidOutItems ) 
                      {

                $('html, body').animate({
                    scrollTop: (thisBox.offset().top-10)
                    }, 700);

                return true;
              });


    });

});

Answer 1

如果您或其他人仍然在寻找这个问题的答案，我做了一些解决方法。想法基本上是一样的，同时做卷轴和砖石的重新定位。这不是最优雅的解决方案，因为我在砖石脚本中添加了几行代码。

在masonry.pkgd.js内部，有一个函数_processLayoutQueue，它定位存储在queue数组中的砖石项目，并为每个项目调用_positionItem。

Outlayer.prototype._processLayoutQueue = function( queue ) {
  for ( var i=0, len = queue.length; i < len; i++ ) {
    var obj = queue[i];
    this._positionItem( obj.item, obj.x, obj.y, obj.isInstant );
  }
};

我所做的是使用标识masonry类检查项目的迭代，在您的例子中是".opened“。因此，当找到该项目时，我立即使用cointainer div (本例中为“#container_div_id”)作为偏移量并添加项目"y“位置(obj.y)来激活页面滚动。最后，代码看起来像这样：

Outlayer.prototype._processLayoutQueue = function( queue ) {
  for ( var i=0, len = queue.length; i < len; i++ ) {
    var obj = queue[i];

    this._positionItem( obj.item, obj.x, obj.y, obj.isInstant );

    /* ADDED CODE */
    if( $(obj.item.element).hasClass('opened')){
        $('html, body').animate({
            scrollTop: $('#container_div_id').offset().top+obj.y
        }, 600);
    }
    /* END OF ADDED CODE */

  }
};

这使得滚动在项目定位后立即开始，而不必等待layoutComplete事件。正如我所说的，这不是最优雅的解决方案，但它是相当可靠的，它很适合我的情况。

希望它能帮助一些人！