Question

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

我差不多了。它正在扩展框并进行新的布局，完成后将页面滚动到框中......但它看起来有点奇怪，它首先将所有框移动到新布局，然后停止并移动页面。我希望一举一动。这有可能。

这是我的代码：

$(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 );
  }
};

我所做的是通过迭代检查具有标识砌体类的项目，在您的情况下为“.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事件。正如我所说，它不是最优雅的解决方案，但它非常可靠，它适用于我的情况。

希望它有所帮助！

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

1 个答案: