今天早起看了慕課的瀑布流，的確講的十分詳細，也十分的好，我在博客里也就只能給代碼加些注釋，和說一下思路。建議大家去看一下慕課的瀑布流教程，非常詳細，每一個細節(jié)都講的非常好，只要懂JS的基礎代碼，看起來應該不是多大問題，里面沒有太難得方法，但自己寫不出來還是因為思路上有問題，下面就詳細說一下幾個重點方法的代碼，建議大家去慕課詳細學習
HTML 和CSS沒有太難得地方

<div id="main">//一個main包含了整個頁面內容，box用來做一個外容器，img作為圖片容器  <div class="box">   <div class="pic">    <img src="img/0.jpg">   </div>  </div>  <div class="box">   <div class="pic">    <img src="img/0.jpg">   </div>  </div> <div>

 //CSS //這里面的填充用padding值，因為offsetHeight是包括一個padding而不包括margin的方便以后高度的測量*{ margin: 0px; padding: 0px;}#main{ position: relative;//在main上設置相對定位，在JS給box設置絕對定位，來控制圖片位置}.box{ padding: 15px 0 0 15px;  float: left;}.pic{ padding: 10px; border: 1px solid #ccc; border-radius:5px; box-shadow: 0 0 5px #ccc;}.pic img{ width: 168px;//瀑布流統一寬度但不同一高度，高度為自適應就好 height: auto;}

JS代碼

在我們寫JS代碼之前，我們需要搞明白我們需要什么方法，是否需要封裝起來調用，我們第一步要干什么，
那么我們第一步要干什么呢？我們做瀑布流首先要做的是獲取到所有小部件也就是box，我們無論做什么處理都是對box的處理或者img的處理，所以要獲取到所有的box，所以我們可以把它封裝起來

//根據class獲取元素function getByClass(parent,clsName){//傳入父元素和想要的class var boxArr=new Array//用來存儲獲取到所有class為box的元素，可以用對象的方式也可以用[]創(chuàng)建 oElements=parent.getElementsByTagName('*');//取出所有子元素 for (var i = 0; i < oElements.length; i++) {//我們需要遍歷所有的子元素  if(oElements[i].className==clsName)//如果我們找到了相應的子元素   boxArr.push(oElements[i]);//取出傳過來相等的className   //push是數組自帶的方法 }; return boxArr;返回數組}

這樣我們就得到了我們想要的class，之后該怎么辦呢，先從一個box下手，我們需要取得第一排到底有多少個元素，因為之前我們并沒有確定我們main的寬度，所以是自適應的也就是說我們把頁面縮小，我們每一排的元素也會相應的減少，為了能讓瀑布流的代碼有更好的應用性，讓不同尺寸的圖片都可以應用，所以，我們需要手動計算一排究竟可以放多少張圖片呢，那如何計算呢？
我們可以算出頁面總寬在box的寬，就OK了