瀑布流布局

瀑布流布局是一种比较流行的网站页面布局方式，比如受淘宝首页猜你喜欢模块等很多大型网站的pc端和移动端都大量使用的一个技术，它也被称为瀑布流式布局
首先我们看几个关于瀑布流的布局效果!

1.png 2.jpg

从这个两个图可以看出来瀑布流效果是等宽元素一次摆列，后面的元素以此添加到指定位置，布局效果很随机不固定。

那么上面说的指定位置，什么是指定位置呢，也就是说，当等宽的元素排列的时候，后面添加的元素要放在所有列高度中最短的那一列，以此类推达到瀑布流布局的效果

suanfa.png

结合瀑布流布局的思想，我们想写出代码来需要完成几个步骤

1. 首先开始书写css中就要固定好排列的每个元素的宽度
2. 根据宽度得到需要多少列
   2-1. 初始化一个数组存入每一列的高度
3. 把后面的元素拆入到一列中最短的高度中
   3-1.每次添加新的数组中按序排列最短的那一项
   3-2.插入后需要修改插入列的高度

html代码

<style>
*{
            margin: 0;
            padding: 0;
        }

        html,body{
            width: 100%
        }

        .waterfall {
            width: 90%;
            margin: 0 auto;
            position: relative;
        }
        img{
            position: absolute;
            margin: 10px;
        }
</style>
<div class="waterfall">
                <img src="http://via.placeholder.com/100x100" alt="100*100">
                <img src="http://via.placeholder.com/100x70" alt="100*70">
                <img src="http://via.placeholder.com/100x150" alt="100*150">
                <img src="http://via.placeholder.com/100x250" alt="100*250">
                <img src="http://via.placeholder.com/100x80" alt="100*80">
                <img src="http://via.placeholder.com/100x90" alt="100*90">
                <img src="http://via.placeholder.com/100x120" alt="100*120">
                <img src="http://via.placeholder.com/100x210" alt="100*210">
                <img src="http://via.placeholder.com/100x230" alt="100*230">
                <img src="http://via.placeholder.com/100x100" alt="100*100">
                <img src="http://via.placeholder.com/100x70" alt="100*70">
                <img src="http://via.placeholder.com/100x150" alt="100*150">
                <img src="http://via.placeholder.com/100x250" alt="100*250">
                <img src="http://via.placeholder.com/100x80" alt="100*80">
                <img src="http://via.placeholder.com/100x90" alt="100*90">
                <img src="http://via.placeholder.com/100x120" alt="100*120">
                <img src="http://via.placeholder.com/100x210" alt="100*210">
                <img src="http://via.placeholder.com/100x250" alt="100*250">
                <img src="http://via.placeholder.com/100x80" alt="100*80">
                <img src="http://via.placeholder.com/100x80" alt="100*80">
                <img src="http://via.placeholder.com/100x90" alt="100*90">
                <img src="http://via.placeholder.com/100x120" alt="100*120">
                <img src="http://via.placeholder.com/100x210" alt="100*210">
                <img src="http://via.placeholder.com/100x100" alt="100*100">
                <img src="http://via.placeholder.com/100x70" alt="100*70">
                <img src="http://via.placeholder.com/100x250" alt="100*250">
                <img src="http://via.placeholder.com/100x210" alt="100*210">
                <img src="http://via.placeholder.com/100x250" alt="100*250">
                <img src="http://via.placeholder.com/100x210" alt="100*210">
                <img src="http://via.placeholder.com/100x230" alt="100*230">
                <img src="http://via.placeholder.com/100x100" alt="100*100">
                <img src="http://via.placeholder.com/100x70" alt="100*70">
                <img src="http://via.placeholder.com/100x150" alt="100*150">
                <img src="http://via.placeholder.com/100x150" alt="100*150">
                <img src="http://via.placeholder.com/100x230" alt="100*230">
                <img src="http://via.placeholder.com/100x70" alt="100*70">
                <img src="http://via.placeholder.com/100x150" alt="100*150">
                <img src="http://via.placeholder.com/100x250" alt="100*250">
                <img src="http://via.placeholder.com/100x80" alt="100*80">
                <img src="http://via.placeholder.com/100x90" alt="100*90">
                <img src="http://via.placeholder.com/100x120" alt="100*120">
                <img src="http://via.placeholder.com/100x210" alt="100*210">
                <img src="http://via.placeholder.com/100x250" alt="100*250">
                <img src="http://via.placeholder.com/100x80" alt="100*80">
                <img src="http://via.placeholder.com/100x80" alt="100*80">
                <img src="http://via.placeholder.com/100x90" alt="100*90">
                <img src="http://via.placeholder.com/100x120" alt="100*120">
                <img src="http://via.placeholder.com/100x210" alt="100*210"> 
            </div>

jquery代码

//一列放多少个
var colNum
//新建数组存储每列高度
var colHeightArray = []
//获取图片的宽度
var imgWidth = $('.waterfall img').outerWidth(true)
//列数值
colNum = Math.floor(  $('.waterfall').width()/imgWidth )
for( var i = 0 ; i < colNum ; i++ ){
  colHeightArray[i] = 0
}


$('.waterfall img').on('load',function(){
      //初始化数组最小值为索引为0的值
      var minValue = colHeightArray[0]
      //初始化数组最小值为索引
      var minIndex =  0
      for(var i = 0 ; i < colNum ; i++ ){
            if(colHeightArray[i] < minValue){
                 minValue = colHeightArray[i] 
                 minIndex = i
           }
      }
                   
     $(this).css({
         left:minIndex * imgWidth,
         top:minValue
      })

     colHeightArray[minIndex] += $(this).outerHeight(true);
     console.log(colHeightArray[minIndex])
 })