瀑布流的实现

瀑布流的特点：等宽不等高

瀑布流实现
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>