vue项目中实现瀑布流

起因：最近公司要做一个用户觉得在H5中哪种看图方式好的测试，于是就要做三个瀑布流的测试页面，一个纯图，一个点大图时可以显示长图，一个图文组合

技术选型

运营的同学要求要一天时间做出来，UI到中午才给设计稿，由于时间紧迫，要是自己从头写的话肯定是不能按时完成了，于是只有找别人写好的组件了。就这样，我在Google里搜了vue的瀑布流组件。给出来的选择无非就两个，一个是star数有两百多的那个vue-waterfall,另外一个是vue-waterfall-easy。我当然是选star数多的来试了，毕竟看官方的README.md里的api介绍也是vue-waterfall的说明更仔细。 但是我才把vue-waterfall刚下载到我的项目里，编译时就报错了，import那个组件时就报错了。调试了半天，发现怎么都是编译是报错。估计是我用的vue的版本达不到吧，就这样我放弃了第一个，选了vue-waterfall-easy来实现。 —

vue-waterfall-easy的使用方法

官方的API在此API

首先需要说明的是，我刚把vue-waterfall-easy引入项目的时候也是报错的。具体报的错误有两个，第一个是找不到scss模块，导致css编译没通过，还有一个错误是没有找到pug包。下面我会说明怎么解决这两个报错。下面说下我是怎么使用这个插件的。

下载和安装

用npm下载npm install vue-waterfall-easy --save-dev。也可以去github上直接下载压缩包 用npm下载下来的直接在view的文件里面用import导入就行了import vueWaterfallEasy from 'vue-waterfall-easy'。然后在对应文件的文件里的components里注册下就行了比如向官方给的例子：

  export default {
    name: 'app',
    components: {
      vueWaterfallEasy
    }
  }

我自己的用法是在node_modules里面找到对应的vue-waterfall-easy模块，把里面的vue-waterfall-easy.vue这个文件直接拷贝到自己项目里面的组件文件components里，然后使用时直接是用的这个文件，要修改代码也是修改这个文件里的代码。

开始使用

当引用import vueWaterfallEasy from '../components/vue-waterfall-easy.vue'时会报错。关于报错:找不到scss模块。解决这个报错的方法是直接把vue-waterfall-easy.vue这个文件里的style的lang=”scss”改成你用的css编译包就可以，我是直接改成我使用的sass.还有一个报错是好不到pug包。这个报错是这个组件使用了pug模板引擎，也就是以前的jade。想继续使用这个模板的话就npm install pug --save-dev。不想使用的话直接把vue-waterfall-easy.vue这个文件里面的template的lang=”pug”删掉，然后把template里面的代码改成正常的html代码。

对应的dom如下：

  <vueWaterfallEasy :imgsArr="imgsArr" @scrollLoadImg="fetchImgsData">
    <template slot-scope="props">
      <!-- <div class="player_info">
          <div class="title">
          
        </div>
        </div> -->
    </template>
  </vueWaterfallEasy>

scrollLoadImg对应的是需要获取数据的方法。