瀑布流布局是一个之前挺火,现在也比较常见的一种布局
这种看起来参差不齐的多栏布局,重点在于每个元素等宽不等高,一般图片网站应用较多
随着页面滚动,数据块会在每列底部不断加载,理论上可以无限加载,且不会页面美观
Pinterest、花瓣网都是比较成熟的采用瀑布流布局的网站
效果图:
PS:这篇博客只有布局相关的内容。如需滚动加载,只要在 window.onscroll 中追加数据块的 dom 元素就可以了
经典套路: JavaScript + 绝对定位
<div id="main">
<div class="box">
<div class="wrapper">
<div class="pic"><img src="" /></div>
<div class="text">简单介绍</div>
</div>
</div>
</div>
整个瀑布流区域用一个 <div id="main"> 作为父容器
瀑布流中的每个数据块用 .box 作为基本布局, .wrapper 呈现样式和实际内容
CSS 样式:
* {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;
}
在 .box 中设置了 padding 是为了留出视觉上的间距
之所以不使用 margin,是因为后面会使用 js 获取元素的 offsetWidth 和 offsetHeight
而这两个属性值是不计算 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 = '0px';
boxs[i].style.left = i * boxWidth +'px';
} else {
//求出最矮盒子的高度
var minBoxHeight = Math.min.apply(this, heightArr);
//求出最矮盒子的索引
var minBoxIndex = getIndex(minBoxHeight, heightArr);
boxs[i].style.top = minBoxHeight + 'px'; //顶部间距即最矮盒子的高度
boxs[i].style.left = minBoxIndex * boxWidth +'px';
//关键:更新最矮盒子的高度
heightArr[minBoxIndex] += boxHeight;
}
}
}
function getIndex(val, arr) {
for(var i in arr) {
if(val == arr[i]) {
return i;
}
}
}
这种方案一开始给 .box 设置了 position: absolute;
所以在打开页面的时候,如果页面性能较差,可能会出现所有数据块堆叠在一起的情况
可以将 .box 的 position: absolute 替换为 float: left,然后在 js 添加定位样式的时候,再补上 position: absolute,视觉上会有所改观