Two methods to implement waterfall flow layout-HTML Tutorial-php.cn

Two methods to implement waterfall flow layout

php中世界最好的语言

Release： 2018-02-23 09:52:27

Original

4161 people have browsed it

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:

Two methods to implement waterfall flow layout

## 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>

Copy after login

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;
}

Copy after login

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(&#39;main&#39;, &#39;box&#39;)
}
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;
    }
  }
}

Copy after login

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;
}

Copy after login

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!