vue-water-flow v0.2.5

water-flow

简单的瀑布流图片展示

Install

npm install vue-water-flow -S -D

Use

入口main.js:
import WaterFlow from "vue-water-flow";
Vue.use(WaterFlow)

在页面直接使用:
<WaterFlow :dataList="list" :colNum="2" @OnHandler="handlerTest" />

 data() {
    return {
      list: [
        { path: "https://picsum.photos/200/200" },
        { path: "https://picsum.photos/200/303" },
        {
          path: "https://picsum.photos/200/310",
        },
        {
          path: "https://picsum.photos/200/300",
        },
        {
          path: "https://picsum.photos/200/400",
        },
      ],
    };
 }

props

  itemType: [String] 元素是否有圆角,默认`default` 
            default: 无圆角
              round: 有圆角

  colNum:   [String,Number] 元素每行个数,默认`2` 
  dataList: [Array] 元素列表
      注意: 可参考用例， [{path: "xxxxxx"}], 关键字段`path`

Event

  OnHandler: 点击获取当前元素 信息:
  
  handlerTest(res) {
    console.log("ces", res);
  },