瀑布流的特点：等宽不等高
瀑布流实现 1、获取图片的宽度 2、获取屏幕的宽度 3、获取展示的列数（屏幕宽度/图片宽度） 4、定义一个数组 存放图片的高度 5、遍历所有的图片 目的：定位图片的位置
代码
$(function() { waterFall() }) function waterFall() { var ImgWidth = $('imgs').width() //获取图片宽度 var screenWidth = $(window).width(); //获取屏幕的宽度 var cols = parseInt(screenWidth / img) //求出列数 //创建一个数组 目的用于存放图片高度值 var heightArr = [] //遍历所有图片 目的定位图片的位置 $.each(img, function(index, item) { var imgHeight = $(item).height() //获取图片的高度 //判断是否是第一行 第一行的高度直接存放在数组中 if (index < cols) { heightArr[index] = imgHeight } else { //最小高度值 var minH = Math.min(...heightArr); //最小高度索引 var mIndex = heightArr = heightArr.findIndex(item => item = minH) $(item).css({ postion: 'absolute', top: minH + 'px', left: mIndex * ImgWidth + 'px' }) //最新最小高度的值 heightArr[mIndex] += imgHeight } }) } </script>