图片瀑布流布局

        不知道各位有没有见过那种图片定宽但高度不定却能排列的整整齐齐的布局，反正我是见过的，具体在哪儿见到我也忘了哈哈哈哈，当初看到觉的挺牛的，最近没事干自己瞎搞了一下，觉的只要思路正确了，实现起来还是蛮简单的，在这里就给大家提供一种思路吧，也当作笔记记录一下，毕竟好记性不如烂笔头，而且年纪越来越大记性也不太好了哈哈哈哈哈。

        言归正传，先来看一下最后实现的效果图吧

效果图

        图片是我百度随便找的几张图，这里可以看到，图片高度虽然不一样，但还是可以整整齐齐的排列，那这是怎么实现的呢？当然单靠CSS是做不到的（如果有大佬能单纯CSS实现还望告诉小弟，让小弟学习一哎）。这里实现主要还是js，html和css都是一些简单的布局和样式，CSS里固定了图片width，height：auto，我直接把html结构贴下面这里就不赘述了。接下来让我们一起来看看，图片是怎么接在height最小的下面排列的。

html结构

        文章开头就说了，这里提供的是思路，那好，我们先来想一想这要怎么做呢？首先一排可以排放几张图片是不是取决与浏览器的可视宽度和单张图片的宽度，好那我们就先来算一下一排可排列的图片个数。这里我们是不是可以直接document.documentElement.clientWidth来获取到浏览器显示宽度，那么除一下单张图片宽度再Math.floor取整是不是就可以了，对我就是这么想的也是这么做的。好那我们就一起来实现一下，首先document.getElementById获取container节点，根据上面到html结构可以看出，我们最后要处理到是img外层class为box的盒子，那我们就getElementsByTagName('*')获取到该节点下到所有自节点名称，如果名称等于box，push到一个数组里，这样我们就得到了container下名为box节点的数组，也就是我们最后要操作的一个Dom数组，我们给这个数组命名为ccontent吧，按照说的，Math.floor(document.documentElement.clientWidth / ccontent[0].offsetWidth)是不是就得到了单行排列的个数了，给container一个.sytle.cssText一个width和margin为auto保证美观，那接下来我们是不是只要让第二行起的图片紧接着最短的那一列排列就好了。

        好，到这里我们就实现了一半了，接下来让我们想想怎么才能让第二行起的图片紧接着最短的那一列排列呢，如果我们把每一列的高度都记录起来去找最小值，然后定位到这个值对应图片到下方是不是就可以了，让我们来试试，首先定义一个高度数组，然后去遍历之前获取到的节点数组ccontent，为了好理解，我们直接假设Math.floor(document.documentElement.clientWidth / ccontent[0].offsetWidth)获取到到列数为6，那么遍历到时候，ccontent前六个的高度直接push到高度数组里，这样我们就获取到了第一排所有图片到高度了，那我们直接Math.min.apply不就能直接拿到最小值了吗，但是这里有个问题，我只知道最小值是多少，但是我不知道最小值对应到位置呀，所以这里我们还需要遍历高度数组去找到最小值到下标，现在值有了下标也有了，所以第二排起的图片我们是不是就知道该怎么排了，直接position定位过去就完了。

        这里还有个要注意的点哦，看，我们刚把第七张图片放到第一排高度最低的图片下面了对吧，那这一列的高度是不是也发生了变化呢，所以position之后别忘了去修改一下高度数组哦，就是把操作的那张图片的高度加上数组最小值就行啦。

        这样我们就实现了一个简单的图片瀑布流啦，单纯的提供一下思路，抛砖引玉，各位如果有更好的思路还望不吝赐教。