碎碎念：
? ? ?好久不見，最近自己有些懈怠沒更過多少博，主要原因之一是對自己學習方式的一些思考，翻看之前的博客多是記錄學習筆記這反映出了自己對于前端還停留在學習-復習知識點的階段壓根沒多少實踐經驗啊這讓我有些惶恐，原因之二是前段時間接觸并了解性地學習了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列了一大堆而拖欠的人不配擁有想法。

轉載于:https://www.cnblogs.com/venoral/p/5613921.html

總結

以上是生活随笔為你收集整理的vuejs和webpack项目（VueComponent）初尝试——瀑布流组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。