本文共 2041 字，大约阅读时间需要 6 分钟。

JS 瀑布流布局

瀑布流是一种形象的称呼，大小不一的盒子就像拼图一样拼接而成，形成瀑布效果。这种布局常见于个人博客和图片素材网站。

效果图

原理

代码

* { margin: 0; padding: 0; }body { width: 100%; background-color: #eee; font-size: 10px; }.all { width: 87em; position: relative; margin: 10px auto 0; }.imgbox { width: 29em; background-color: #fafafa; box-sizing: border-box; position: absolute; box-shadow: 0 0 10px #999; }img { width: 29em; display: block; }ッド article { width: 23em; font-size: 0.8em; line-height: 2.6em; margin: 30px auto; }

function waterfall() {  var imgbox = document.getElementsByClassName('imgbox');  var margin_top = 5; //第一列 margin-top  var margin_top2 = 5; //第二列 margin-top  var margin_top3 = 5; //第三列 margin-top  var arr = [0, 0, 0];  for (var i = 0; i < imgbox.length; i++) {    var min = Math.min.apply(null, arr);    var column = arr.indexOf(min);    if (column == 0) {      arr[column] = min + imgbox[i].offsetHeight;      imgbox[i].style.left = '0px';      if (i > 2) {        imgbox[i].style.top = arr[column] - imgbox[i].offsetHeight + margin_top + 'px';        margin_top += 5;      }    } else if (column == 1) {      arr[column] = min + imgbox[i].offsetHeight;      imgbox[i].style.left = imgbox[i - 1].offsetWidth + 5 + 'px';      if (i > 2) {        imgbox[i].style.top = arr[column] - imgbox[i].offsetHeight + margin_top2 + 'px';        margin_top2 += 5;      }    } else if (column == 2) {      arr[column] = min + imgbox[i].offsetHeight;      imgbox[i].style.left = imgbox[i - 1].offsetWidth + imgbox[i - 2].offsetWidth + 10 + 'px';      if (i > 2) {        imgbox[i].style.top = arr[column] - imgbox[i].offsetHeight + margin_top3 + 'px';        margin_top3 += 5;      }    }  }}window.onload = function() {  waterfall();};

思路

这种布局适合图片和文字-content混合布局，效果简洁且实用。