WaterfallPlugin

功能描述

图片瀑布流，用例见 index.html。

效果图

依赖的插件

./libs/Macy.js

快速使用

JS调用

var masonry = new Macy({
  container: '#macy-container',  // 必填 | 图像列表容器ID | String | DOM的ID
  trueOrder: false,  // 选填 | false | Boolean | 将此设置为false将优先考虑每个列的高度与项目本身的顺序相等
  waitForImages: false,  // 选填 | false | Boolean | 如果设置为true，插件将等待页面上的所有图像加载后再运行。默认设置为false，它将在每次加载图像时运行
  useOwnImageLoader: false,  // 选填 | false | Boolean | 如果希望使用不同的图像加载库，请将此设置为true
    
  margin: { // 选填 | 0 | Number | 外边距,默认外边距为0
      y: 2,
      x: 2,
  },

  columns: 6,  // 选填 | 4 | Number | 列数,默认4列显示


  breakAt: {  // 选填 设置针对不同分辨率对应显示列数
      1200: 6,
      940: 5,
      520: 3,
      400: 2,
      200: 2
  },
});

特别说明

样式修改，见用例 index.html。

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18