砌體 - 滾動到佈局中單擊的元素 - 無限

我試圖在使用砌體庫的元素上單擊一次。它的工作方式是，當我點擊它擴展的元素時（我添加了類以使框更大），同時頁面正在滾動到該框。問題是，當你展開盒子時，它可能會掉下一條線，這意味着調用滾動的函數會滾動到錯誤的地方。它應該做的佈局，並獲得元素的新位置，然後移動...砌體 - 滾動到佈局中單擊的元素 - 無限

我知道它幾乎工作。它正在擴展盒子並進行新的佈局，並在完成後將頁面滾動到盒子中......但它看起來有點奇怪，它首先移動所有盒子以獲得新佈局，然後停止並移動頁面。我寧願這一舉一動。這是可能的。

這裏是我的代碼：

$(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

砌體 - 滾動到佈局中單擊的元素 - 無限

回答

相關問題