html图片瀑布流布局

实现瀑布流思路如下：
（1）定义参数column记录一行存放多少张图片,数组arr存放每一列的图片,minHeight数组存放每一列最小的图片高度.没一行的所有图片宽度固定,高度不固定.
（2）先按顺序排第一列，记录下每一列当前占据的高度值存放在minHeight数组中。
（3）第一列排完之后开始排后面的元素，要找出所有列数中高度最小的那一个，排在它的下面，高度值累加。以此类推。
 

html部分

     <div id="imgContain"></div>  //存放图片容器

      <img id="imgPreview" />  //后续点击某张图片可实现放大预览功能

css部分

  html,
      body {
        background-color: rgb(192, 242, 233);
        background-repeat: no-repeat;
        background-size: cover;
        margin: 0;
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
        opacity: 1;
        animation: page-fade-in 0.1s forwards;
      }

      @keyframes page-fade-in {
        0% {
          opacity: 0.9;
        }

        100% {
          opacity: 1;
        }
      }

      #imgContain {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0.5% solid;
        border-image: url("./border.jpg") 50 round;
        border-image-width: 0.5%;
      }

      #imgContain > ul {
        padding: 0;
        margin: 0;
        width: 99%;
        display: flex;
        justify-content: space-between;
        margin-top: 1%;
        margin-bottom: 1%;
      }

      #imgContain > ul > li {
        list-style: none;
        float: left;
        padding: 0;
        margin: 0;
      }

      #imgContain > ul > li > div {
        color: rgb(236, 11, 236);
        font-size: 12px;
        text-align: center;
      }

      #imgPreview {
        max-width: 800px;
        max-height: 600px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* 水平垂直都居中 */
        border: 2px solid rgb(255, 119, 157);
      }

      #loadInfo {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
      #loadDesc {
        color: rgb(236, 11, 236);
        font-size: 15px;
        text-align: center;
      }
      #loadImg {
        width: 50px;
        height: 50px;
        background-image: url("./loading.gif");
        background-size: 100% 100%;
      }

      #head,
      #footer {
        width: 100%;
        height: 30px;
        margin: 20px auto;
        padding: 0;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
      }

      #head li,
      #footer li {
        list-style: none;
        float: left;
        margin-right: 30px;
        font-size: 15px;
        color: gray;
      }

js部分

   function showImg() {
        const COLUMN = 5; // 列li
        let arr = []; // 存储列li
        let minHeight = []; // 存储列的高度
        let imgWidth; // 图片宽度
        let liMargin; // 列li间距
        const headDiv = document.getElementById("head");
        const imgPreviewDiv = document.getElementById("imgPreview");
        const loadInfoDiv = document.getElementById("loadInfo");

        create();

        function create() {
          // 创建ul li作为每一列的容器
          imgWidth = 99 / COLUMN;
          liMargin = 1 / (COLUMN - 1);

          var ulDiv = document.querySelector("#imgContain>ul");
          var imgContainDiv = document.getElementById("imgContain");
          var node = document.createElement("ul");

          imgContainDiv.appendChild(node);

          if (ulDiv != null) {
            imgContainDiv.removeChild(ulDiv);
          }

          for (let i = 0; i < COLUMN; i++) {
            var li = document.createElement("li");
            node.appendChild(li);
            li.style.width = imgWidth + "%";

            if (i == 0 || i == COLUMN - 1) {
              li.style.margin = 0;
            } else {
              if (i == COLUMN - 2) {
                li.style.marginLeft = liMargin + "%";
                li.style.marginRight = liMargin + "%";
              } else {
                li.style.marginLeft = liMargin + "%";
              }
            }

            arr.push(li);
            minHeight.push(0);
          }
          createImg();
        }

        function createImg() {
          let img = new Image();
          img.style.borderRadius = "5px";
          img.num = 1;
          img.src = `./img/${img.num}.jpg`; // 素材图片的规律为 2.jpg 3.jpg 4.jpg ...
          img.style.width = "100%";
          img.style.display = "block";
          // 当图片加载完后
          img.onload = loadHandler;
        }

        function loadHandler() {
          // 高度数组的最小值
          let min = Math.min(...minHeight);
          // 高度数组的最小值索引
          let minIndex = minHeight.indexOf(min);
          // 克隆一份图片
          let image = this.cloneNode(true);
          // 将图片加入对应最小值索引的容器中
          arr[minIndex].appendChild(image);
          var imgDesc = document.createElement("div");
          arr[minIndex].appendChild(imgDesc);
          imgDesc.innerHTML = "图片id:" + this.num + "&nbsp;&nbsp;&nbsp;原图像素:" + this.width + "x" + this.height;
          imgDesc.style.marginBottom = "5px";
          // 更新最小值索引的容器的高度
          minHeight[minIndex] += image.getBoundingClientRect().height + imgDesc.getBoundingClientRect().height;
          this.num++;

          // 图片最多展示20行
          // if (this.num > COLUMN * 20 + 1) {
          //   this.onload = null;
          //   return;
          // }

          //加载动画结束
          if (this.num > 50) {
            loadInfoDiv.style.display = "none";
          }

          this.src = `./img/${this.num}.jpg`;

          imgPreviewDiv.style.display = "none";

          image.onclick = function () {
            imgPreviewDiv.src = this.src;
            imgPreviewDiv.style.display = "";
          };

          imgPreviewDiv.onclick = function () {
            imgPreviewDiv.src = "";
            imgPreviewDiv.style.display = "none";
          };
        }
      }

      showImg();

      window.addEventListener("resize", showImg);

最终效果:

点击某张图片可放大查看:

完整代码路径:

https://gitee.com/yueluo9527/picture-waterfall-flow-layout

主页样例:

http://www.wangzhanghui.com/

子页样例:

http://www.wangzhanghui.com/yueluo_web_html/navitem/nav_item_3.html