瀑布流效果展示图片的实现（小demo）

代码展示：
首先html页面中需要先在head中引入以下文件：

<link rel="stylesheet" href="flow.css">
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script src="flow.js"></script>

html页面：

<div class="masonry">
    <div class="item">
        <img class="lazy" src="images/1.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/2.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/3.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/4.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/5.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/6.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/7.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/8.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/9.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/10.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/11.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/12.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/13.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/14.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/15.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/16.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/17.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/18.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/19.jpg" alt="" />
    </div>
    <div class="item">
        <img class="lazy" src="images/20.jpg" alt="" />
    </div>
</div>

css文件：

.masonry {
    width: 100%;
    margin-top: 50px;
    position: relative;
}

.item {
    z-index: 10;
    transition: 0.25s;
    overflow: hidden;
    position: absolute;
}

.item img {
    width: 100%;
    height: 100%;
    transition: 0.25s;
}

.item:hover img {
    z-index: 100;
    transition: 0.25s;
    overflow: hidden;
    animation: bounceIn 0.25s ease-in 2 alternate;
}

@keyframes bounceIn {
    100% {
        transform: scale(1.07);
    }
}

js文件：

//瀑布流效果
//这里有一个坑（已经修复）：
//因为是动态加载远程图片，在未加载完全无法获取图片宽高
//未加载完全就无法设定每一个item(包裹图片)的top。

//item的top值：第一行：top为0
//            其他行：必须算出图片宽度在item宽度的缩小比例，与获取的图片高度相乘，从而获得item的高度
//                   就可以设置每张图片在瀑布流中每块item的top值（每一行中最小的item高度，数组查找）
//item的left值：第一行：按照每块item的宽度值*块数
//             其他行：与自身上面一块的left值相等
function waterFall() {
    // 1- 确定图片的宽度 - 滚动条宽度
    var pageWidth = getClient().width - 8;
    console.log("pageWidth:" + pageWidth);
    var columns = 3; //3列
    var itemWidth = parseInt(pageWidth / columns); //得到item的宽度
    $(".item").width(itemWidth); //设置到item的宽度

    var arr = [];

    $(".masonry .item").each(function (i) {
        var height = $(this).find("img").height();
        var width = $(this).find("img").width();
        var bi = itemWidth / width; //获取缩小的比值
        var boxheight = parseInt(height * bi); //图片的高度*比值 = item的高度

        if (i < columns) {
            // 2- 确定第一行
            $(this).css({
                top: 0,
                left: (itemWidth) * i
            });
            arr.push(boxheight);

        } else {
            // 其他行
            // 3- 找到数组中最小高度  和 它的索引
            var minHeight = arr[0];
            var index = 0;
            for (var j = 0; j < arr.length; j++) {
                if (minHeight > arr[j]) {
                    minHeight = arr[j];
                    index = j;
                }
            }
            // 4- 设置下一行的第一个盒子位置
            // top值就是最小列的高度 
            $(this).css({
                top: arr[index],
                left: $(".masonry .item").eq(index).css("left")
            });

            // 5- 修改最小列的高度 
            // 最小列的高度 = 当前自己的高度 + 拼接过来的高度
            arr[index] = arr[index] + boxheight;
        }
    });
}

//clientWidth 处理兼容性
function getClient() {
    return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
}

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

//初始化
window.onload = function () {
    //实现瀑布流
    waterFall();
}