Question

当我完成调整元素大小时，我想触发砌体，这是我的示例http://jsfiddle.net/oanj5fo4/4/但是当我调整大小时，我的浏览器无法处理（freez） msnry.layout（），当元素的大小调整完成后，如何触发 msnry.layout（）？

$(document).ready(function () {
        $('.item').resizable();
        var container = document.querySelector('.masonry');
        var msnry = new Masonry(container, {
            columnWidth: 60
        });
    $(function () {
            var prevHeight = $('.item').height();
            var prevWidth = $('.item').width();
            $('.item').attrchange({
                callback: function (e) {
                    var curHeight = $(this).height();
                    var curWidth = $(this).width();
                    if (prevHeight !== curHeight || prevWidth !== curWidth) {
                        console.log('height changed from ' + prevHeight + ' to ' + curHeight);
                        prevHeight = curHeight;
                        prevWidth = curWidth;
                        // msnry.layout();
                    }
                }
            }).resizable();
        });
    });

我使用外部库：

砖石
attrchange

我的任务是在页面中制作具有自动排列/响应式布局的可调整大小的容器。

Answer 1

我查看了resizable的来源并发现了回调函数停止所以我添加了超时来帮助Masonry在调整大小后检测容器的新布局：

$(document).ready(function () {
    $('.item').resizable();
    var container = document.querySelector('.masonry');
    var msnry = new Masonry(container, {
        columnWidth: 60
    });

    $(function () {
        $('.item').resizable({
            stop: function (event, ui) {
                setTimeout(function () {
                    msnry.layout();
                }, 300);
            }
        });
    });
});

元素完成后通过可调整大小调整大小的Trig函数

1 个答案: