上一篇: 如何通过jQuery addClass()淡出b... 下一篇:jquery中的可排序选项卡可排序

jquery-masonry – 布局初始化时的砌体脚本事件

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery-masonry – 布局初始化时的砌体脚本事件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

每次 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

解决方法

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

@H_994_8@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!");
    }

});