jQuery方式实现图片瀑布流

瀑布流原理

步骤：

1、首先确定图片的列数
2、第一行图片默认位置
3、top属性：后续的每一张图片需要放置到高度最小的列数的位置，放到该位置后，对应列的高度增加防止图片的高度
4、left属性：放置列的索引值*图片宽度
5、之后的图片都需要进行3、4步骤的操作。

因此，需要一个数组存储列的当前高度值，每次需要放置一张图片，需要查找数组的最小值（列的最小高度），并且找出最小值对应的索引（列号），至此获取绝对定位的top，left属性值。

初始效果图：

函数实现代码

function waterFall(){
    var screenWidth =$(window).width();//获取浏览器的宽度
    var boxWidth =  $(".box").outerWidth();//获取含外边款的宽度，含有padding属性
    var num = parseInt(screenWidth/boxWidth);//计算行数
    var arr = [];
    $(".box").each(function(index,element){
        var eleHeight = $(element).outerHeight();
        if(index < num){
            arr[index] = eleHeight;
        }else{
            var curMinHeight = Math.min(...arr);
            var minIndex = $.inArray(curMinHeight,arr);//获取高度最小值的索引
            $(element).css({
                position:'absolute',
                top:curMinHeight+'px',
                left:minIndex*boxWidth+'px',
            })
            arr[minIndex] += eleHeight;
        }
    })
}

补充说明

对于每个图片的div都使用的是outerWidth/outerHeight属性，原因是在于每个div都有一个padding属性，如果图片容器的div’的padding属性值不同，计算位置会有偏差。如图：

最终效果图

具体实现代码，请戳jQuery瀑布流