砌体 - 滚动到布局中单击的元素 - 无限

我试图在使用砌体库的元素上单击一次。它的工作方式是，当我点击它扩展的元素时（我添加了类以使框更大），同时页面正在滚动到该框。问题是，当你展开盒子时，它可能会掉下一条线，这意味着调用滚动的函数会滚动到错误的地方。它应该做的布局，并获得元素的新位置，然后移动...砌体 - 滚动到布局中单击的元素 - 无限

我知道它几乎工作。它正在扩展盒子并进行新的布局，并在完成后将页面滚动到盒子中......但它看起来有点奇怪，它首先移动所有盒子以获得新布局，然后停止并移动页面。我宁愿这一举一动。这是可能的。

这里是我的代码：

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


    }); 

});

来源

2013-12-23 Marcin J.

如果你或其他人还在寻找一个答案，我做了一些解决此问题。这个想法基本上是一致的，同时做滚动和砌体重新定位。这不是最优雅的解决方案，因为我在砌体脚本中添加了几行代码。

内部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); 
    } 
};

我所做的是检查通过与识别砌体类的项目的迭代，在你的情况“打开”。因此，当找到该项目时，我立即使用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事件。正如我所说，它不是最优雅的解决方案，但它非常稳固，它适用于我的情况。

希望它可以帮助别人！

来源

2014-03-12 05:42:15 mintave

砌体 - 滚动到布局中单击的元素 - 无限

回答

相关问题