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

Posted 2020-07-29

碎碎念：
     好久不见，最近自己有些懈怠没更过多少博，主要原因之一是对自己学习方式的一些思考，翻看之前的博客多是记录学习笔记这反映出了自己对于前端还停留在学习-复习知识点的阶段压根没多少实践经验啊这让我有些惶恐，原因之二是前段时间接触并了解性地学习了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列了一大堆而拖欠的人不配拥有想法。