Two methods to implement waterfall flow layout

Waterfall flow layout is a layout that was very popular before and is now more common.

This kind of uneven-looking multi-column layout focuses on each element, etc. The width is not equal to the height, which is commonly used in picture websites.

As the page scrolls, data blocks will be loaded continuously at the bottom of each column. In theory, it can be loaded infinitely without making the page beautiful.

Pinterest , Huaban.com are relatively mature websites that adopt waterfall flow layout

Rendering:

## 1. Classic routine:

JavaScript + Absolute positioning

HTML structure:

<div id="main">
  ...  <div class="box">
    <div class="wrapper">
      <div class="pic"><img  src="" / alt="Two methods to implement waterfall flow layout" ></div>
      <div class="text">简单介绍</div>
    </div>
  </div>
  ...</div>

The entire waterfall flow area uses a

as the parent container

Each data block in the waterfall flow uses .box as the basic layout, .wrapper to render the style and actual content

CSS style:

* {margin: 0; padding: 0;}html, body {width: 100%; height: 100%; background-color: #EDEDED;}#main {
  position: relative;
  width: 1280px; /*限定父容器的宽度*/
  margin: 0 auto;
}.box {
  position: absolute;
  padding: 7px; /*不建议使用 margin*/
  box-sizing: border-box;
  width: 256px; /*限定数据块的宽度*/}.wrapper {
  padding: 5px;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
}.pic {
  font-size: 0; /*消除行内元素的间隙*/}.pic img {
  width: 100%;
  height: auto;
}.text {
  color: #999;
  background: #FAFAFA;
  font-size: 14px;
  padding-top: 5px;
}

The padding is set in the .box to leave a visual spacing

The reason why margin is not used is because js will be used later to obtain the offsetWidth and offsetWidth of the element offsetHeight

And these two attribute values ​​do not calculate margin

JavaScript:

window.onload = function() {
  waterFall('main', 'box')
}
function waterFall(main, box) {  var main = document.getElementById(main);  var boxs = main.getElementsByClassName(box);  var boxWidth = boxs[0].offsetWidth; //获取每个数据块的宽度
  var mainWidh = main.offsetWidth; //获取主容器的宽度
  var cols = Math.floor(mainWidh / boxWidth); //计算列数
  
  var heightArr = []; //定义一个存放 top 值的数组
  for(var i = 0; i < boxs.length; i++) {    var boxHeight = boxs[i].offsetHeight;      if(i < cols) { //第一行        heightArr.push(boxs[i].offsetHeight);
        boxs[i].style.top = &#39;0px&#39;; 
        boxs[i].style.left = i * boxWidth +&#39;px&#39;;
      } else {        //求出最矮盒子的高度
        var minBoxHeight = Math.min.apply(this, heightArr); 
        //求出最矮盒子的索引 
        var minBoxIndex = getIndex(minBoxHeight, heightArr); 
        boxs[i].style.top = minBoxHeight + &#39;px&#39;; //顶部间距即最矮盒子的高度
        boxs[i].style.left = minBoxIndex * boxWidth +&#39;px&#39;; 
        //关键:更新最矮盒子的高度
        heightArr[minBoxIndex] += boxHeight;
      } 
  }
}
function getIndex(val, arr) {  for(var i in arr) {    if(val == arr[i]) {      return i;
    }
  }
}

This solution initially gives .box Position: absolute;

So when opening the page, if the page performance is poor, all data blocks may be stacked together

You can set the position of .box to: absolute Replace it with float: left, and then add position: absolute when adding the positioning style in js. The visual effect will be improved.

2. Pure CSS3 to implement waterfall flow

CSS3 New An attribute column has been added, which allows the browser to adapt the layout by specifying the number of columns column-count

Just delete the JavaScript part above, and then modify #main and .box:

#main {
  width: 1280px;
  margin: 0 auto;
  -webkit-column-count: 5;
  column-count: 5;
  -webkit-column-gap: 0;
  column-gap: 0;
}.box {
  padding: 7px;
  box-sizing: border-box;
  width: 256px;
}

However, the waterfall flow achieved in this way is actually arranged vertically, while the previous classic solution was arranged horizontally.

As a new attribute of CSS3, only IE10 and above browsers support it. column

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to define the minimum height of the inline element span

How to use the html area image hotspot

What are the operations of borderless and borderless iframes

How to use image to submit form

The above is the detailed content of Two methods to implement waterfall flow layout. For more information, please follow other related articles on the PHP Chinese website!