推荐瀑布流库Macy.js

2021-03-26

Macy.js是一个轻量级的、无依赖的、4kb的砌体布局库，为无麻烦的配置而设计。

官网地址：Macy。

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

Macy主要提供自动布局方案，支持breakAt各种屏幕尺寸适配不同列数。

显示容器的内容可完全自定义。

分享推荐