关于瀑布流布局

一堆等宽不等高的数据块组成的页面

瀑布流效果图

图 1

2019-06-04更新

大概就是最近有个学姐的毕设做到了这个

但是对于瀑布流这个东西一直只有听说没有自己实现

初步了解下了可以通过js/css3/~~jQuery~~来实现，

先挖个坑，等课程设计做完了再来埋。

2019-06-07更新

开工啦！开工啦！

目的就是实现图 1 所示的布局

分为CSS3实现和JS实现

CSS实现

这一部分使用CSS实现瀑布流布局。

关键技术

Columns属性

-> 点这里查看文档

实现代码

HTML 代码

code

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>demo</title>
</head>
<body>
  <div class="box-wrapper">
    <div class="box">1</div>
    <div class="box spe">2</div>
    <div class="box">3</div>
    <div class="box spe">4</div>
    <div class="box spe">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box spe">8</div>
    <div class="box spe">9</div>
  </div>
</body>
</html>

CSS 代码

code

 .box {
  height:123px;
  padding:1em;
  margin-top:1em;
  -moz-page-break-inside:avoid-region;
  -webkit-column-break-inside:avoid-region;
  break-inside:avoid-region;
  border:1px solid #000;
  background:#909090;
}
.box:first-child {
  margin-top: 0;
}
.spe {
  height:225px;
}
.box-wrapper {
  -moz-column-count:4;
  -webkit-column-count:4;
  column-count:4;
  -moz-column-gap:1em;
  -webkit-column-gap:1em;
  column-gap:1em;
}

总结

整体的技术很简单（是真简单又好用，而且纯粹使用CSS实现。

하지만！

是 CSS3 的语法，需要做一些兼容处理。
其次还有一个问题需要考虑，可以在测试结果的两个图中可以看到，九个方块的顺序，是自上而下↓自左到右→排序的，但是通常而言，瀑布流的使用，往往顶部的内容会是最新/热度最高的。所以单纯使用CSS实现瀑布流，最顶端的元素的index不一定是最靠前的（这里我可能描述的不清楚，想表示的意思是在图3中，顶部的元素的index为1，4，6，9，而通常情况下，应该是1，2，3，4才对），拿已经排序好的data进行渲染时（这里指数组渲染，在ReactJS中很常见），就会出现本应该在下方的内容出现在顶端。（某种程度来说，这个缺陷挺致命的，解决方法呢！就是用js实现啦~

JavaScript实现

实现代码

HTML 代码

code

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./index.js"></script>
    <link rel="stylesheet" href="./index.css">
  </head>

  <body>
    <div id="container">
      <div class="box"> <div class="small">1</div> </div>
      <div class="box"> <div class="big">2</div> </div>
      <div class="box"> <div class="small">3</div> </div>
      <div class="box"> <div class="big">4</div> </div>
      <div class="box"> <div class="big">5</div> </div>
      <div class="box"> <div class="small">6</div> </div>
      <div class="box"> <div class="small">7</div> </div>
      <div class="box"> <div class="big">8</div> </div>
      <div class="box"> <div class="big">9</div> </div>
    </div>
  </body>

</html>

CSS 代码

code

* {
  margin : 0px;
  padding: 0px;
}

/*将主容器的布局方式设置为相对布局*/
#contianer {
  position: relative;
}

.box {
  padding: 5px;
  float  : left;
  width  : 250px;
  height : auto;
}

.box div {
  background-color: #999;
  text-align      : center;
  font-size       : 3rem;
}

.small {
  height: 123px;
}

.big {
  height: 225px;
}

JavaScript 代码

Code

window.onload = () => {
  waterfall("container", "box");

}

const waterfall = (parent, child) => {

  const PARENT = document.getElementById(parent)

  //得到class是box的子元素集合
  const boxs = []
  const CHILDS = PARENT.getElementsByTagName("*");
  
  //获取class为box的子元素
  for (let i = 0; i < CHILDS.length; i++) {
    if (CHILDS[i].className === child)
      boxs.push(CHILDS[i])
  }

  //获取屏幕宽度
  const screenWidth = document.documentElement.clientWidth;

  //依据box元素的宽度和可视宽度获取一行可以放置的div数量，使用 math.floor 向下取整
  var num = Math.floor(screenWidth / boxs[0].offsetWidth);

  //为waterfall容器添加width和margin
  PARENT.style.cssText = 'width:' + boxs[0].offsetWidth * num + 'px;margin:0 auto';//固定每行摆放个数 和上下左右边距

  getHeights(boxs, num);
}

const getHeights = (boxs, num) => {
  //记录每一列的height
  const HEIGHTS = [];

  for (index in boxs) {
    if (index < num) {
      //获取第一行的box的height
      HEIGHTS[index] = boxs[index].offsetHeight;
    } else {

      //获取HTIGHTS中最小值（即所有列中最短的那一列的height
      const minHeight = Math.min.apply(Math, HEIGHTS)
      //获取最小列的下标
      const targetIndex = HEIGHTS.indexOf(minHeight)

      //通过为当前元素设置top/left值将当前元素插入布局中
      boxs[index].style.position = 'absolute'
      boxs[index].style.top = minHeight + 'px'
      boxs[index].style.left = boxs[targetIndex].offsetLeft + 'px'

      //插入完成，更新HEIGHTS数组（因为有新的元素进来，一定存在某一列的height变动
      HEIGHTS[targetIndex] += boxs[index].offsetHeight
    }
  }
}

window.onresize = () => {
  location.reload();
}

实现效果图

瀑布流效果图

图 4 js实现waterfall布局

总结

整体思路

获取子元素的宽度（每个子元素的宽度相同）以及浏览器宽度
计算一行有多少个元素
遍历子元素，往最短的那一列的加元素，加元素的具体实现就是修改元素的top和left值
加一次元素更新一次每列的height值，就可以实现瀑布流布局

ToDoList

因为js的实现比较正统，可以拓展的业务比较多，我！勇敢的打算摸鱼了（天天划水身体棒

滑动加载（更适合移动端
浏览器宽度变化局部刷新页面（在例子中粗暴的监听到浏览器宽度变动，一变动就全刷新
ReactJS工程中实现

文章总结

通篇以CSS和JS实现了瀑布流布局

开头的时候说到可以使用JavaScript/CSS/jQuery实现

为什么没有用jQuery呢?

懒
对jQuery没有那么熟悉(学jQuery都是两年前的事了，学了之后，就没在实际项目中用过… ReactJS多好啊! 嘿，嘿嘿嘿
在大环境下jQuery已经没有那么高的需求了（个人意见…个人意见…

而CSS和JS的两种实现方法对比而言，差距还是很大的啦，大概有辣么大，可以说不用动脑子就可以使用CSS实现瀑布流布局，但是局限性在之前的栏目总结中提到了，感觉还是很致命的。而JS的实现，大概就是获取一下DOM元素再获取下元素宽度、浏览器宽度、最后在使用JS更改元素的绝对位置，个人感觉使用JS修改CSS不算是一种DOM操作吧（如果其实是的话，就是吧hhh单纯是我菜了。所以感觉（只是感觉!感觉!!）在ReactJS中使用js的方法实现瀑布流的布局不会有什么局限性（或者说排斥性?当初刚学ReactJS总想着进行一些DOM操作。。。console栏中一片黄色warning QAQ

所以之后会在实际的ReactJS项目中应用下waterfall布局，正好实验室也想做一个搜图片的搜索引擎应用。

하지만!

并没有说CSS的实现方法不好的意思，看实际应用场景惹。谁不喜欢简单易实现的东西(明示期待一键生成代码

综上！~~祝大家新年快乐~~

今天是端午节

端午安康！

关于瀑布流布局

2019-06-04更新

2019-06-07更新

CSS实现

关键技术

实现代码

相关介绍

column-count

column-gap

break-inside

总结

JavaScript实现

实现代码

相关介绍

waterfall()

getHeights()

浏览器宽度变动监听

实现效果图

总结

文章总结