WaterfallPlugin

功能描述

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

效果图

WaterfallPlugin - 图1

依赖的模块

./libs/Macy.js

快速使用

JS调用

  1. var masonry = new Macy({
  2.   container: '#macy-container',  // 必填 | 图像列表容器ID | String | DOM的ID
  3.   trueOrder: false,  // 选填 | false | Boolean | 将此设置为false将优先考虑每个列的高度与项目本身的顺序相等
  4.   waitForImages: false,  // 选填 | false | Boolean | 如果设置为true，插件将等待页面上的所有图像加载后再运行。默认设置为false，它将在每次加载图像时运行
  5.   useOwnImageLoader: false,  // 选填 | false | Boolean | 如果希望使用不同的图像加载库，请将此设置为true
  7.   margin: { // 选填 | 0 | Number | 外边距,默认外边距为0
  8.       y: 2,
  9.       x: 2,
  10.   },
  12.   columns: 6,  // 选填 | 4 | Number | 列数,默认4列显示
  15.   breakAt: {  // 选填 设置针对不同分辨率对应显示列数
  16.       1200: 6,
  17.       940: 5,
  18.       520: 3,
  19.       400: 2,
  20.       200: 2
  21.   },
  22. });

特别说明

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