效果图：

图片.png

布局实现思路：
1，空白页面，规划第一排放好多个小块，容器宽度/小块的宽度 取整
2，放第一排时，数组个数为1取得的整数，赋值数组里面每个值都为0
3，第一排，按照小块前面的数，把第一排排满，任然使用下面的算法
4，把一竖行看成是一个数组项，它的总高为当前下标的值

图片.png

5，每次循环到下一个小块，找到它的位置（top left）,通过找到数组里面的最小的值，这个最小值为小块的top,这个最小值的下标可以计算出整体的left值，因此自然而然就可以定位一个小块的位置
关键代码：

     //循环遍历每个小块  
      $('.img').each(function(){
       //找到数组里面的最小高度
            var imgs_height_array_min=Math.min.apply(null,imgs_height_array)
      //获得这个最小高度在数组里面对应的下标
            var minindex=imgs_height_array.indexOf(imgs_height_array_min)
       //给当前遍历的小块设置css样式，找到它的位置（top left）
            $(this).css({
                'top':imgs_height_array_min,
                'left':minindex*$('.img').outerWidth(true)
            })
         //更新最小值
            imgs_height_array[minindex]=imgs_height_array_min+$(this).outerHeight(true)
        })

怎样实现自适应瀑布流布局？

实现的关键点：

图片.png

图片.png