JS原生瀑布流效果实现

今天早起看了慕课的瀑布流，的确讲的十分详细，也十分的好，我在博客里也就只能给代码加些注释，和说一下思路。建议大家去看一下慕课的瀑布流教程，非常详细，每一个细节都讲的非常好，只要懂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的元素，可以用对象的方式也可以用[]创建 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了