欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

实现瀑布流

程序员文章站 2022-08-17 09:01:49
为什么别人的教程那么难看懂?代码多的都一大坨,蓝色,香菇~我认为,既然是教程,就应当简洁明了,在尽可能不伤眼、少伤脑的情况下习得精髓!我先举个栗子,假设有15张图片,高度分别未10,20,30,40,50...140,150,排成3列。不用怀疑,第一排肯定是10,20,30,40,50 。第二排,不难预测,第6张放在第1张下面,top值为第1张的高度,left值为第1张的的left......

假设需要加载3组图片,图片高度分别为

[20,10,30,40,50]

[60,90,70,80,100]

[100,100,100,100,100]

对于第一排

第一排直接显示就可以了,当前高度数组为 [20,10,30,40,50]

对于第二排

先考虑第1张,高60,而上一排最小高度为10,在第 2 列,所以把这张排到第 2 列,更新高度数组为[20,10+60,30,40,50]

第2张,高90,现在最小高度为20,在第 1 列,所以把这张排到第1列,更新高度数组为[20+90,70,30,40,50]

第3张,高70,现在最小高度为30,在第 3 列,所以把这张排到第3列,更新高度数组为[110,70,30+70,40,50]

....类推

示例代码


      for (let i = 0; i < 15; i++) { //先定它个15个div
        var div = document.createElement("div");
        div.className = "item";
        div.style.height = i * 10 + 10 + "px"; //假设图片高度,要替换成实际图片高度 。
        document.body.appendChild(div);
      }
      var heightArray = [], //存储每列的高度。
        columns = 5; //假设为5列;
      for (let i = 0; i < 15; i++) {
        // 遍历所有div,对他们设置left和top值
        var currentDiv = document.getElementsByClassName("item")[i];
        if (i < columns) { //i<columns说明为第一排
          currentDiv.style.top = 0; //第一排top值为0
          currentDiv.style.left = i * 100 + "px"; // 第一张left:0,第二张left:100...
          heightArray[i] = currentDiv.offsetHeight; // 第1排直接设置
        } else {// 非第1排
          var minHeight = Math.min.apply(null, heightArray); //找到高度最小值
          var minIndex = heightArray.indexOf(minHeight); //找到最小值所在列
          currentDiv.style.top = minHeight + "px"; // 设置top值
          currentDiv.style.left = minIndex * 100 + "px"; //设置left值
          heightArray[minIndex] += currentDiv.offsetHeight; // 更新高度数组。

        }
      }

css:

 body {
        position: relative;
      }
      .item {
        margin: 20px;
        width: 100px;
        border: 1px solid red;
        position: absolute;
        box-sizing: border-box;
      }

效果:

实现瀑布流

随机高度:

实现瀑布流

 

 

 

本文地址:https://blog.csdn.net/illusion_melody/article/details/84259142