砌体脚本事件布局初始化

如何在每次Masonry脚本重新组织元素时执行我的函数，例如当窗口调整大小时？在这个例子中它只是第一次运作。砌体脚本事件布局初始化

$(document).ready(function() 
{ 
    $('#container').masonry({ 
    // layoutComplete: masonry_refreshed(), // <-- doesn't work propriety 
     itemSelector: '.item' 
    }); 

    masonry_refreshed(); 
}); 

function masonry_refreshed() 
{ 
    alert('Masonry refreshed') 
}

DEMO：http://codepen.io/anon/pen/HeuKw

来源

2013-12-12 Bazuka

检查：http://masonry.desandro.com/events.html 您可以使用以下砌体事件：

msnry.on('layoutComplete', masonry_refreshed);

注意msnry是在其中定义砌筑变量的名称。

编辑： 完整的示例代码：

$(document).ready(function(){ 
    var container = document.querySelector('#container'); 
    var msnry = new Masonry(container,{ 
     itemSelector: '.item', 
     columnWidth: 70 
    }); 

    msnry.on('layoutComplete', masonry_refresh); 

    function masonry_refresh(){ 
     console.log("Masonry resized!"); 
    } 

});

演示：http://jsfiddle.net/Cd6ce/1/

EDIT2：如果你真的想使用它的jQuery的方式：

$(document).ready(function(){ 
    $('#container').masonry({ 
     itemSelector: '.item', 
     columnWidth: 70 
    }); 
    var msnry = $('#container').data('masonry'); 
    msnry.on('layoutComplete', masonry_refresh); 

    function masonry_refresh(){ 
     console.log("Masonry resized!"); 
    } 

});

演示：http://jsfiddle.net/Cd6ce/4/

来源

2013-12-12 13:46:07

对不起不行...我已经添加了工作演示http://codepen.io/anon/pen/HeuKw它告诫仅第一次，但不是当调整窗口大小。我想我需要创建我自己的事件窗口调整大小... – Bazuka

http://jsfiddle.net/Cd6ce/1/试试这个......它的工作原理 –

或者如果你真的想用jQuery的方式，那么你需要用'var msnry = $ container.data（'masonry'）;'来获得你的砌体实例，并使用我提供的代码。编辑：添加到回答 –

你必须禁用初始化 '布局'。请参阅：http://masonry.desandro.com/options.html

msnry = new Masonry(self.el, { 
    isInitLayout: false, 
    itemSelector: '.brick' 
}); 

msnry.on('layoutComplete', function(){ 
    console.log('completed'); 
}); 

msnry.layout();

来源

2014-07-18 10:43:17 andreboekhorst

这对我有用，因为使用事件绑定方法，它只会在窗口调整大小后触发，而不是在启动时触发。此方法也会在启动时以及在窗口大小调整时触发事件。谢谢！ – Nahuel

砌体脚本事件布局初始化

回答

相关问题