Macy.js布局计算

2021-04-06

Macy.js布局计算recalculate，常见情况下的手动调用。

通常初始化时计算一次，不然默认元素可能出现在容器中间位置，影响体验。

自定义元素中有图片时，在runOnImageLoad中配置调用。

异步数据影响元素尺寸时，手动触发调用。

let masonry = new Macy({
        container: '#market-container', // 图像列表容器
        trueOrder: false,
        waitForImages: false,
        useOwnImageLoader: false,
        // mobileFirst: true,
        debug: true,
        margin: { x: 13, y: 4 },    // 设计列与列的间距
        columns: 5,    // 设置列数
        breakAt: {
            1700: { columns: 5, margin: { x: 15,  y: 15 } },
            1000: { columns: 4, margin: { x: 15,  y: 15 } },
            700: { columns: 3,  margin: { x: 15,  y: 15 } },
            500: { columns: 1,  margin: { x: 15,  y: 15 }
        },
    }
})

// 图片加载完成
masonry.runOnImageLoad(() => {
    masonry.recalculate();
}, true);

// 初始化后调用一次
masonry.recalculate();

// 如异步拉取数据
// setTimeout(() => {
//     masonry.recalculate();
// }, 3000);
技术