React 实现瀑布流布局

1.话不多说直接上代码

        

let onload = function () {
    // 首先拿到容器的宽度 因为等宽不等高 我们可以拿宽度除于宽度得到最多放多少张图片
    let contentWidth = document.getElementsByClassName('content')[0]
    // 获取单个图片的宽度
    let imgs = contentWidth.children
    let imgWidth = imgs[0].offsetWidth
    // 通过总宽度 来获取一行最多多少张图片
    let nums = Math.floor(contentWidth.offsetWidth / imgWidth)
    console.log(nums)

    // 获取第一排的所有高度
    
    let arrHeight = [] //存储图片高度的列表

    for (let i = 0; i < imgs.length; i++) {
      if (i < nums) {
        // 将每张图片的高度都添加到 arrHeight列表中
        arrHeight.push(imgs[i].offsetHeight)
      } else {
        // 第二排图片 默认添加到第一个照片下面
        let obj = { minH: arrHeight[0], minI: 0 }
        // 循环判断 那个高度最小 将第二排的图片进行排比
        for (let j = 0; j < arrHeight.length; j++) {
          // 找到高度最小的将那个默认的给进行替换
          if (arrHeight[j] < obj.minH) {
            obj.minH = arrHeight[j]
            obj.minI = j
          }
        }
        console.log(obj)
        // 给不是第一排的数据进行设置 样式定位
        imgs[i].style.position = 'absolute'
        imgs[i].style.left = imgs[obj.minI].offsetLeft + 'px'
        imgs[i].style.top = obj.minH + 'px'
        arrHeight[obj.minI] = arrHeight[obj.minI] + imgs[i].offsetHeight
      }
    }

  }

 2.布局

 <div className='content'>
      {
        list.map((item, index) => {
          return (
            <div className='content_item' key={index}>
              <img src={item} alt={index} />
            </div>
          )
        })
      }

    </div>
  )

3.css 样式

* {
  margin: 0;
  padding: 0;
}

.content {
  width: 100vw;
}

.content_item{
  padding: 10px;
  border: 1px solid #ccc;
  float: left;
}

.content_item>img{
  width: 130px;
}