css+js瀑布流布局实现

记录一个瀑布流布局问题的解决过程

最开始使用js实现，将子元素进行绝对定位，根据宽高及顺序判断定位的top与left。

问题：存在新增子元素页面加载不及时的问题，会出现子元素初始状态叠加在一起，计算完成后才能正常显示。

点击查看代码

window.onload = () => {
  /* 传入waterfall与pic节点，调用函数waterFall */
  waterFall('.waterfall', '.cases-item')
}
// column每行个数
// lineSpace列间距
// rowSpace行间距

function waterFall(waterfall, pic, marginTop=20,lineSpace = 0, rowSpace = 40) {
  let column=3
  let win_w=$(window).width();
  if(win_w>1200){
    column=3
  } else  if(win_w<=1200&&win_w>600){
    column=2
  }
  /*waterfallWidth可视窗口waterfall的宽度  */
  var waterfallWidth = document.querySelector(waterfall).offsetWidth
  /* 计算每个pic的宽度 */
  var line = (column - 1) * lineSpace
  var picWidth = parseInt((waterfallWidth - line) / column)
  /* 获取所有pic节点 */
  var picNode = document.querySelectorAll(pic)
  /* 通过for循环完成瀑布流的设置 */
  var picArr = []
  for (var i = 0; i < picNode.length; i++) {
    /* 设置每一个pic的宽度 */
    picNode[i].style.width = picWidth + 'px'
    /* 获取每一个pic的高 */
    // console.log('picNode[i]',picNode[i],picNode[i].clientHeight)
    var picHeight = picNode[i].clientHeight
    /* 通过判断，区分第一行和非第一行 */
    if (i < column) {
      /* 给第一行的进行定位 */
      picNode[i].style.top = marginTop
      picNode[i].style.left = (picWidth + lineSpace) * i+ 'px'
      /* 将获取的pic的高push到一个数组记录下来 */
      picArr.push(picHeight)
      // console.log('picHeight',picHeight)
    }else{
      /* 在非第一行中，找到数组的最小值 */
      var picArrMin=Math.min(...picArr)
      // console.log(picArrMin);
      /* 获取最小值的索引 */
      var mixIndex=picArr.indexOf(picArrMin)
      // console.log(mixIndex);
      /* 对非第一行的pic进行定位，top为最小值的高，left为pic宽加行间距乘以最小值的索引 */
      picNode[i].style.top=(picArrMin+rowSpace+marginTop+marginTop)+'px'
      picNode[i].style.left=(picWidth+lineSpace)*mixIndex+'px'
      /* 对数组中的最小值进行修改 */
      picArr[mixIndex]+=picHeight+rowSpace
    }
  }
  const boxH=Math.max(...picArr)
  $(waterfall).css({height:boxH+'px'})
}

---

再次尝试使用css中的column（多列布局）实现简单的瀑布流排版。
问题：元素默认为竖向排版，新增子元素不是在最下方更新，用户体验不好。

<div class="waterfall">
    <div class="item">内容</div>
    <div class="item">内容</div>
    <div class="item">内容</div>
    <div class="item">内容</div>
    <div class="item">内容</div>
    <div class="item">内容</div>
    <div class="item">内容</div>
</div>

css

.waterfall{
  column-count: 3;//几列
  column-gap: 10px;//间距
  .item{
    display: inline-block;
    width: 100%;
  }
}

---

再次更换为另一种方法，使用flex布局实现，结合css中的:nth-child() 和 order属性，将子元素横向排列。
但需要为父元素固定高度，才能达到效果，最终使用flex布局，结合js为父元素的高度赋值，解决了问题。
当添加子元素时，再次调用获取高度方法，更新父元素高度即可。

布局同上
css

.waterfall{
  display: flex;
  /* 让内容按列纵向展示 */
  // flex-flow: column wrap;
  flex-direction:column;
  flex-wrap: wrap;
  height: 5000px;//初始高度，防止在脚本未加载时布局错乱
  /* 强制使内容块分列的隐藏列 */
  &::before,
  &::after {
    content: "";
    flex-basis: 100%;
    width: 0;
    order: 2;
  }
  /* 重新定义内容块排序优先级，让其横向排序 */
  &.three{//三列
    &:nth-child(3n+1) { order: 1; }
    &:nth-child(3n+2) { order: 2; }
    &:nth-child(3n)   { order: 3; }
  }
  &.two{//两列
    &:nth-child(2n+1) { order: 1; }
    &:nth-child(2n) { order: 2; }
  }
}

js

function getListHeight(){
  //获取当前子项list
  let list=document.getElementsByClassName("item")
  if(list&&list.length>0){
    const heightArr=[0,0,0]
    //按顺序获取每列的高度
    for(let i=0;i<list.length;i++){
      if(i%3===0)heightArr[0]+=list[i].offsetHeight
      if(i%3===1)heightArr[1]+=list[i].offsetHeight
      if(i%3===2)heightArr[2]+=list[i].offsetHeight
    }
    //取最大值为父元素设置高度
    const maxHeight=Math.max(...heightArr)+50
    $(".waterfall").css({height:maxHeight+'px'});
  }else{
    //没有子项则重置高度
    $(".waterfall").css({height:'auto'});
  }
}

以上就是全部解决过程，文中flex布局方式参考了如下文章，感谢分享
https://www.cnblogs.com/xiaoxiaomini/p/17240258.html