瀑布流效果js实现

瀑布流js实现

 // 页面尺寸改变时实时触发
window.onresize = function() {
    //重新定义瀑布流
    waterFall();
};

//初始化
window.onload = function(){
    console.log("开始瀑布流")
    //实现瀑布流
    waterFall();

}

function waterFall(){
    //1.求出列数
    var box = $(".item");     
    var boxWidth = box.outerWidth(); //当前图片的宽度    不用width是因为width会使图片紧挨着左右没有间隙，而outerWidth会在图片宽度基础上加上padding以致每张图片左右有一定的间隙20     var screenWidth = $(window).width();  //整个屏幕的宽度
    var cols = parseInt(screenWidth/boxWidth);  //列数23     //2.创建数组
    var heightArr = [];
    //3.图片遍历循环，除第一排不需要定位，取高度值 其他排  定位处理
    $.each(box,function(index,item){
        //取出图片的高度29         var boxHeight = $(item).outerHeight();
        if(index < cols){    //第一排，取高度值32             heightArr[index] = boxHeight;
        }else{
            //最小图片的高度
            //数组中最小的值
            var minBoxHeight = Math.min(...heightArr);   //第一列图片高度值存放在数组中heightArr,找出最小值
            //最小的索引
            var minBoxIndex = $.inArray(minBoxHeight,heightArr);   //遍历数组heightArr中查找minBoxHeight这个最小值，返回下标。
            $(item).css({
                position:'absolute',
                left:minBoxIndex*boxWidth+'px',
                top:minBoxHeight+'px'
            });
            //高度追加
            heightArr[minBoxIndex] += boxHeight;
        }
    })
}