# 瀑布流
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
# js实现瀑布流
原生js编写的瀑布流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>瀑布流</title>
<style>
* {
margin: 0;
padding: 0;
position: relative;
}
img {
width: 220px;
display: block;
}
.item {
box-shadow: 2px 2px 2px #999;
position: absolute;
width:200px
}
.t1{
height:100px;
}
.t2{
height:220px
}
.t3{
height:310px
}
.t4{
height:260px
}
.t5{
height:120px
}
.t6{
height:630px
}
.t7{
height:430px
}
.t8{
height:320px
}
</style>
</head>
<body>
<div id="box">
<div class="item t1"></div>
<div class="item t3"></div>
<div class="item t8"></div>
<div class="item t4"></div>
<div class="item t1"></div>
<div class="item t3"></div>
<div class="item t8"></div>
<div class="item t1"></div>
<div class="item t3"></div>
<div class="item t8"></div>
<div class="item t4"></div>
<div class="item t1"></div>
<div class="item t3"></div>
<div class="item t8"></div>
<div class="item t1"></div>
<div class="item t5"></div>
<div class="item t2"></div>
<div class="item t1"></div>
<div class="item t4"></div>
<div class="item t5"></div>
<div class="item t2"></div>
<div class="item t1"></div>
<div class="item t5"></div>
<div class="item t2"></div>
<div class="item t1"></div>
<div class="item t4"></div>
<div class="item t5"></div>
<div class="item t2"></div>
</div>
</body>
</html>
<script>
var box = document.getElementById('box');
var items = box.children;
// 定义每一列之间的间隙 为10像素
var gap = 10;
window.onload = function() {
// 一进来就调用一次
waterFall();
// 封装成一个函数
function waterFall() {
// 1- 确定列数 = 页面的宽度 / 图片的宽度
var pageWidth = getClient().width;
var itemWidth = items[0].offsetWidth;
var columns = parseInt(pageWidth / (itemWidth + gap));
var arr = [];
for (var i = 0; i < items.length; i++) {
if (i < columns) {
// 2- 确定第一行
items[i].style.top = 0;
items[i].style.left = (itemWidth + gap) * i + 'px';
arr.push(items[i].offsetHeight);
} else {
// 其他行
// 3- 找到数组中最小高度 和 它的索引
var minHeight = arr[0];
var index = 0;
for (var j = 0; j < arr.length; j++) {
if (minHeight > arr[j]) {
minHeight = arr[j];
index = j;
}
}
// 4- 设置下一行的第一个盒子位置
// top值就是最小列的高度 + gap
items[i].style.top = arr[index] + gap + 'px';
// left值就是最小列距离左边的距离
items[i].style.left = items[index].offsetLeft + 'px';
// 5- 修改最小列的高度
// 最小列的高度 = 当前自己的高度 + 拼接过来的高度 + 间隙的高度
arr[index] = arr[index] + items[i].offsetHeight + gap;
}
}
}
// 页面尺寸改变时实时触发
window.onresize = function() {
waterFall();
};
// 当加载到第30张的时候
window.onscroll = function() {
if (getClient().height + getScrollTop() >= items[items.length - 1].offsetTop) {
// 模拟 ajax 获取数据
var datas = [
"../image/瀑布流/001.jpg",
...
"../image/瀑布流/030.jpg"
];
for (var i = 0; i < datas.length; i++) {
var div = document.createElement("div");
div.className = "item";
div.innerHTML = '<img src="' + datas[i] + '" alt="">';
box.appendChild(div);
}
waterFall();
}
};
};
// clientWidth 处理兼容性
function getClient() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight
|| document.body.clientHeight
}
}
// scrollTop兼容性处理
function getScrollTop() {
return window.pageYOffset || document.documentElement.scrollTop;
}
</script>
- 首先瀑布流所有的图片应该保持宽度一致，高度是由内容决定。
- 左浮动效果图
左浮动的话，我们可以看到第6个盒子直接就在第4个盒子旁边停下了，因为第4个高度最高，挡住了它左浮动的去路。第6个盒子是第2行的最后一个，所以第7个盒子只能在第3行排列了。当排到第12个盒子的时候，盒子会以第11个盒子的位置为基础左浮动(这就是第12个盒子为什么没有‘跳到’第9个盒子下面的原因)，碰到第8个盒子后又被挡住了。
- 那通过定位的方式实现瀑布流的最基本原理，只要动态设置它的topleft值就能让它排列
- column = pageWidth / (itemWidth + gap); left = i * ( itemWidth + gap );
- 需要定义一个数组arr，将获取到的高度存在数组中，因为第2行排列的时候需要考虑top值，此时只能根据第1行图片盒子的高度来设置；
- 获取到刚刚数组中，高度最小的那一列，将第2行的第1个图片盒子放置在它的下方；此时的left值就是高度最小列的offsetLeft；top值就是：第1行高度最小列的高度(为了布局美观可以加上上下间隙gap)。记录下高度最小列的索引index，后面计算会用到；设置完成之后，会发现后面所有的图片都叠在这个高度最小列的下面，原因就是此时的最小列高度没有改变，应该加上下面图片的高度，得出一个新高度。
# css实现瀑布流
设置外部容器多列列数（column-count）和列间距（column-gap）
设置内容条目的break-inside属性为avoid，使条目总体不被打断。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0
}
.box {
height:123px;
padding:1em;
margin-top:1em;
-moz-page-break-inside:avoid;
-webkit-column-break-inside:avoid;
break-inside:avoid;
border:1px solid #000;
background:#909090;
}
.spe {
height:225px;
}
.box-wrapper {
-moz-column-count:4;
/* Firefox */
-webkit-column-count:4;
/* Safari 和 Chrome */
column-count:4;
-moz-column-gap:1em;
-webkit-column-gap:1em;
column-gap:1em;
}
</style>
</head>
<body>
<div class="box-wrapper">
<div style="margin-top:0px" class="box"></div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box"></div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box"></div>
<div class="box spe"></div>
<div class="box spe"></div>
</div>
</body>
</html>
# 浮动问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0
}
.k1,.k2,.k3{
width:calc(20% - 2px);
border:1px solid red;
float:left;
}
.k1{
height:200px;
}
.k2{
height:500px
}
.k3{
height:800px
}
</style>
</head>
<body>
<div class="k1"></div>
<div class="k3"></div>
<div class="k1"></div>
<div class="k2"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
<div class="k1"></div>
</body>
</html>
