vuejs和webpack项目（VueComponent）初尝试——瀑布流组件

碎碎念：
     很久不见，最近本身有些懈怠没更过多少博，主要缘由之一是对本身学习方式的一些思考，翻看以前的博客可能是记录学习笔记这反映出了本身对于前端还停留在学习-复习知识点的阶段压根没多少实践经验啊这让我有些惶恐，缘由之二是前段时间接触并了解性地学习了amd，cmd模块，angular和vue，一些模板引擎，less预编译语言，以及开发相关的各类构建工具...讲真前端真的好杂，爱莫能助有时就挺迷茫，因此这些仅仅只是接触是接触跟着官网了解学习并无深刻原理性的探索学习。
曾经我在一开始就尝试深刻原理的学习，实践后发现这种学习方式并不适合初学新知识，对于新知识的学习应该仍是要按部就班由浅入深，想不通的点能够先放下到后来理解多了再领悟，否则一开始就探索原理会致使本身进入过分思考的误区深陷不出来，嗯，仍是等有实践经验和时间的积累后天然而然就会想明白。就好比虽然我此次用VueJs和webpack工具流实现了一个简单的瀑布流组件，其实我是经历了以下内心路程：
1.因实验室项目须要学习了下瀑布流（JS方式）布局的实现，固然还有用纯css实现的方式（CSS3的学习--实现瀑布流），理清实现原理（瀑布流布局）后用HTML，CSS，JS快速实现了瀑布流的第一版，对于JS的执行过程和页面的渲染过程我仍是相对了解的因而也就没什么难度。

2.可是程序员不能总停留在编写这些没有复用的程序，开发过程效率低的阶段吧，他们说聚聚们都在玩转各类构建工具和框架，做为菜鸟的我碰巧最近在学习vueJS和Less，因而想把一些有趣的东西用vue写成组件的形式，一来做为一次自我尝试二来熟悉一下vue+webpack的开发流程（即便如今的我对于webpack的执行机制仍是有些云里雾里的）。

3.因而须要对瀑布流小项目进行包装，vue框架还好本质上仍是JS嘛，由于多了一层webpack构建工具让这个小项目看起来略复杂（若是你要究webpack的执行机制的话）。可是现阶段做为初学者的我只是会用但并没吃透webpack的原理，这个不急，项目先实现了再说。

4.对于nodeJS和npm，AMD，CMD，ES6有所了解这是前提，以后该项目须要用到以下技术和知识，不要紧用的时候再翻看文档

     vue-cli项目引用.vue组件

     安装 | vue-router文档 npm package

     Less快速入门

     Vue组件

用vue-cli初始化本项目，和webpack搭配完成一套集开发，测试，发布的流程（简单起见个人项目省略了测试的步骤）；
vue-router用于index主页的路由管理，由于以后想把VueComponent作成一个项目用来收纳各类有趣的组件，Waterfall.vue只是本次尝试实现的一个组件模块，后续可能还会有其它的组件；
Less用于Waterfall.vue组件中css的编写。

项目代码：

Waterfall.vue组件的完整代码以下（后期能够完善ajax请求数据加载的功能）：

<template>
  <div id="wf">
    <div v-for="item in items">
      <img v-bind:src="item.src">
    </div>
  </div>
</template>

<script type="text/javascript">
/**
 * init
 */
var $items, itemWidth, time;
window.addEventListener('resize', function(){
    clearTimeout(time);
    time = setTimeout(function(){
     wf.arrange();
    }, 500);
});

/**
 * 时间大小的设置决定是先加载img仍是arrange布局
 */
setTimeout(function(){
  $items = document.querySelectorAll('#wf div');
  itemWidth = $items[0].offsetWidth;
  wf.arrange();
}, 0);

/**
 * 随机高度，随机图片，布局函数
 */
var wf = {
  rdmImg: function(){
    var width = Math.floor(Math.random() * 100) + 300,
        height = Math.floor(Math.random() * 500) + 300;
    return "http://placekitten.com/" + height + '/' + width;
  },
  rdmHeight: function(){
    return Math.round(Math.random() * 200) + itemWidth;
  },
  arrange: function(){
    var viewWidth = document.documentElement.clientWidth || document.body.clientWidth,
        cols = Math.floor( viewWidth / itemWidth );

    //存放每列当前长度的数组并初始化
    var colsHeight = [];
    for(var i = 0; i< cols; i++){
        colsHeight.push(0);
     }
    //安置每一项item
    $items.forEach( function(ele, idx) {
    var curHeight = colsHeight[0], col = 0;
    for(var i = 0; i< colsHeight.length; i++){
    if(colsHeight[i] < curHeight){
        curHeight = colsHeight[i];
        col = i;
      }
    }
    ele.style.left = col * itemWidth + 'px';
    ele.style.top = curHeight + 'px';
    ele.style.height = wf.rdmHeight() + 'px';
    //console.log(ele.querySelector('img').src); // http://localhost:8080/

    colsHeight[col] += ele.offsetHeight;
    });
  },
}

/**
 * export数据层
 */
var items = (function(){
       var arr = new Array();
        for(var i= 0; i< 10; i++){
            var img = {};
            img.src = wf.rdmImg();
            arr.push(img);
        }
        return arr;
  })();
export default{
    data () {
      return {
        items: items,
      }
    }
}

</script>


<style lang="less">
@width: 200px;
@padding: 20px;

#wf{
  position: relative;
  margin: 0 auto;
  div{
    width: @width;
    position: absolute;
    top: 0;
    left: 0;
    padding: @padding;
    border: solid 1px grey;
    border-radius: 4px;
    .transition(left 1s);
    img{
      width: 100%;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

.transition(@transition){
  -webkit-transition: @transition;
  -moz-transition: @transition;
  -o-transition: @transition;
  transition: @transition;
}
</style>

View Code

完整项目放于github：https://github.com/venoral/VueComponent

 

效果图：index主页略丑，仅实现路由功能了，后期会完善的。

最后想给本身说的话就是：      有想法就去实现啊，list列了一大堆而拖欠的人不配拥有想法。