- 什么是瀑布流，说话不形象，直接看图说话
![S55M%73LKAKO@]OZ7D@MH.png](http://upload-images.jianshu.io/upload_images/3361706-6f2520633110a1c3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 原来瀑布流就是长这样，虽然这个瀑布流有点丑陋，但是当你当你把图片中的方块换成图片，应该会很赞，同时随着你鼠标的滚动，图片会层次不齐的加载在页面上，形成像瀑布一样的流水效果
- 看完图后，想必你是对它很感兴趣，那咱不废话，直接说说原理把！
- 你的视觉告诉你，啥子瀑布流，不就是每一列的宽度相等，每一列的宽度不相等，没什么了不起，战胜困难就要从战略上藐视它，小样瀑布流我们还搞不定，自从我们听了若愚大大的课，解决它简直是so easy ,piece of cake,
- 来把，我才不怕你----破布流，枯燥的理论开始了
-首先 外面一个打的div包裹，position:relative;里面的div position:absolute;这是为了有利于用JS来操作他们的top、left来更改他们的位置,同时把这些新建一个空数组来遍历它们后，一列为数组的一个元素，来设置它们的位置。
第二步， 我们先把一行放满，看看到底一行能摆几个，用这个公式就可以了：一行能摆的数量=窗口可视区域的宽度/一个div的宽度，由于我们给每个div设置了margin，所以获取元素的宽度时，应该使用 var $itemWidth=$('.item').outerWidth(true)，它获取的是宽度=content宽度+padding宽度+border宽度+margin,而不是width().
第三步，我们开始来摆放每个div把，我们会发现第一行没有什么问题，依次摆放即可，可是到了第二行，每一行的高度不一，我该把它放在哪了，没事，有规律可循：这时，第二行的第一张应该放在页面上高度最小的div，同时，下一个div总是和当前队列中高度最小的下面，依次如此，即，div的水平方向距离为=div数组索引号*div固定宽度，，div垂直方向距离=div数组索引号对应的值（即当前列的图片高度之和）。div摆放后更新当前列的所有图片总高度。
注意：第三步你也可以理解为，给定一个数组，在该数组中找出成员最小值和该成员在数组中的索引号。
举个例子来说：有一排人站在你面前，现在让你在它们中找个最矮，正常人都会这么想，我先假设这群人的第1个人是身高最矮的，然后我拿第1个人的身高和第2人的身高比较，若是要是第1个人的身高最矮，就继续认为第1个人最矮，若是第2人身高更矮，我就扔了第1个人，拿第2个人继续按照这个方法比较，最后肯定能找到里面个子最矮的。
也就是：首先假定数组中某个值为最小值，然后用for循环遍历数组中的所有成员和假定最小值比较，如果某数组成员的值小于假定值，则获取将该值（colSumHeight[i]）和对应的索引号（i）
第四步：设置初始状态数组，数组长度等于当前一行能摆放的图片数，该数据记录每行中每张图片的高度，数组的索引号记录图片在每行上第几列的位置。每张图片摆放后，修改数组内对应索引号成员的值（即当前列的高度之和）
-
破布流原理到此结束，下面是详细的JS代码，有兴趣的看官可以看看
$(function(){ var waterfall=(function($){ function render(){ //获取div元素的宽度 var elWidth=$('.item').outerWidth(true), //计算得到一列放置div的数量 colNum=parseInt($(window).width()/elWidth), //设置空数组，来存放每一列div的高度 colSumHeight=[]; //遍历空数组，添加元素，并把每一列div的高度设置为0 //等同于colSumHeight=[0,0,0,0,0] for(var i=0;i<colNum;i++){ colSumHeight.push(0); } //遍历所有的div,通过在函数计算出每一列的高度 //找出高度之和最小的一列div,接着一次按照这个方法 //把所有的div摆放完毕 $('.item').each(function(){ var $cur=$(this); var idx=0, minSumHeight=colSumHeight[0]; for(var i=0;i<colSumHeight.length;i++){ if(colSumHeight[i]<minSumHeight){ idx=i; minSumHeight=colSumHeight[i]; } } $cur.css({ left:idx*elWidth, top:minSumHeight }); colSumHeight[idx]=$cur.outerHeight(true)+colSumHeight[idx]; }) } render() //当浏览器窗口缩放时，重新放置计算一列放置div的数量 $(window).on('resize',function(){ render(); }) return{ init:render } })(jQuery) waterfall.init(); })
