回到顶部

「 初音未来：歌姬计划 Mega39's+\游戏档案馆 」2023-06-07 「 戴拿&盖亚奥特曼\皮套摄影 」2024-08-02 「 宝可梦：白金\游戏档案馆 」2023-08-06 「 闪焰王牌/模玩摄影 」2024-08-06 「 多龙巴鲁托\模玩摄影 」2023-06-05 「 泽塔奥特曼\皮套摄影 」2023-06-07 「 阿尔宙斯\模玩摄影 」2023-06-07

原生js实现简易瀑布流 #137

Anuluca Date : 2021-07-13 Tags : 3

需求

使用原生 js 实现，从左到右，由上至下见缝插针，列数适应页面。

实现前的基础代码

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .box > img {
    width: 400px;
    margin: 10px;
  }
  .box {
    float: left;
  }
</style>
<body>
  <div class="outer-box">
    <div class="box">
      <div>1</div>
      <img data-src="./1.jpg" />
    </div>
    <div class="box">
      <div>2</div>
      <img data-src="./2.jpg" />
    </div>
    <div class="box">
      <div>3</div>
      <img data-src="./3.jpg" />
    </div>
    <div class="box">
      <div>4</div>
      <img data-src="./4.jpg" />
    </div>
    <div class="box">
      <div>5</div>
      <img data-src="./5.jpg" />
    </div>
    <div class="box">
      <div>6</div>
      <img data-src="./6.jpg" />
    </div>
    <div class="box">
      <div>7</div>
      <img data-src="./7.jpg" />
    </div>
    <div class="box">
      <div>8</div>
      <img data-src="./8.jpg" />
    </div>
    <div class="box">
      <div>9</div>
      <img data-src="./9.jpg" />
    </div>
    <div class="box">
      <div>10</div>
      <img data-src="./10.jpg" />
    </div>
    <div class="box">
      <div>11</div>
      <img data-src="./11.jpg" />
    </div>
    <div class="box">
      <div>12</div>
      <img data-src="./12.jpg" />
    </div>
    <div class="box">
      <div>13</div>
      <img data-src="./13.jpg" />
    </div>
  </div>
</body>

实现代码

<script>
  function waterfall() {
    let box = document.getElementsByClassName("box");
    let screenWidth = document.body.clientWidth; //屏幕宽度
    let boxWidth = box[0].clientWidth; //单张图片的宽度
    var heightArr = []; //所有图片高度
    //图片列数
    let cols = parseInt(screenWidth / boxWidth);

    //遍历所有图片
    [...box].forEach((element, index) => {
      let boxHeight = element.offsetHeight;
      //是不是第一排
      if (index < cols) {
        heightArr[index] = boxHeight;
      } else {
        //取出第一排图片中的最小高度
        let minHeight = Math.min(...heightArr);
        //最小高度图片的索引
        let minIndex = heightArr.indexOf(minHeight);
        document
          .getElementsByClassName("box")
          [index].setAttribute(
            "style",
            `position:absolute;left:${minIndex * boxWidth}px;top:${minHeight}px`
          );
        // 高度追加
        heightArr[minIndex] += boxHeight;
      }
    });
    console.log(heightArr);
  }

  setTimeout(() => {
    waterfall();
  }, 1000);
</script>