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列了一大堆而拖欠的人不配擁有想法。