原生js实现瀑布流效果

效果

dom结构

可以根据自己的需要增加dom元素

<div class="conten">    <div class="imgs">      <img src="" alt="">    </div></div>

JavaScript部分

window.onload

官方解释是： 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。

因为我们在操作dom的时候；如果不等网页加载完毕的话；可能获取不到页面；或者是undefined；所以需要在window.onload中执行代码

window.onload = function () {  
    onFlow()
}

onFlow()函数

函数的大概思路如下：

• 首先获取conten盒子的宽度

• 然后获取imgs盒子的宽度；在得知两个盒子的宽度以后就可以知道，一行可以放多少个imgs盒子了（nums）

• 然后再去遍历imgs的所有盒子，并进行判断如果nums小于imgs的盒子时，把imgs的高度保存到arrHeight数组中

• 如果nums大于imgs的盒子时；再去查找第一排中的那个盒子最矮，就将第二排的第一个放到第一排中最低的一个盒子下面，后面的就依次类推

• 获取最矮的这个盒子的offsetLeft；并用定位给定位过去

• 最后给最低的这个盒子的高度赋值 = 最低的这个盒子的高度 + 定位过去的这个盒子

onFlow()完整代码

   function onFlow() {
    // 1.初始化数据
  	let conten = document.getElementsByClassName('conten')[0];
    // 2.获取数据高宽度
    let onImgs = document.getElementsByClassName('imgs')
    // 获取盒子宽度
    let contenWidth = conten.offsetWidth
    // 获取每一个盒子的宽度
    let imgsWidth = onImgs[0].offsetWidth
    // 获取一排可以放多少个向下取整
    let nums = Math.floor(contenWidth / imgsWidth)
    // 保存高
    let arrHeight = []

    for (let j = 0; j < onImgs.length; j++) {
      if (j < nums) { // 把第一排的高度保存到数组中
        arrHeight.push(onImgs[j].offsetHeight)
      } else {

        let objMin = { //用来保存最小值
          minS: arrHeight[0],
          minIndex: 0
        }

        // 循环获取最小值及索引
        for (let n = 0; n < arrHeight.length; n++) {
          if (arrHeight[n] < objMin.minS) {
            objMin.minS = arrHeight[n]
            objMin.minIndex = n
          }
        }
        // 给最小的值定位
        let topItem = onImgs[objMin.minIndex].offsetHeight
        onImgs[j].style.position = 'absolute'
        onImgs[j].style.left = onImgs[objMin.minIndex].offsetLeft + 'px'
        // 这儿加 10 ；是因为我做了一个边距；下面同理
        onImgs[j].style.top = arrHeight[objMin.minIndex] + 10 + 'px'
        // 这儿是把放下一排的是高度与以上高度相加
        arrHeight[objMin.minIndex] = arrHeight[objMin.minIndex] + onImgs[j].offsetHeight + 10
      }
    }
  }

添加图片

  // 点击按钮添加元素（图片）  
let btn = document.getElementsByClassName('btn')[0]  
btn.addEventListener('click', init)

init()增加函数

   function init() {
    let Oimg = [      'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3355464299,584008140&fm=26&gp=0.jpg',      'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3365503159,1655500687&fm=26&gp=0.jpg',    ]
    for (let i = 0; i < Oimg.length; i++) {
      var div = document.createElement('div')
      div.setAttribute('class', 'imgs')
      var Omgs = new Image; // 创建img元素
      Omgs.src = Oimg[i] // 将连接给src
      div.appendChild(Omgs) // 把img挂载到div上
      conten.appendChild(div) // 然后将div元素挂载到imgs上
    }
    onFlow()
  }