瀑布流布局
2017-11-30 本文已影响0人
刘圣凯
瀑布流式布局是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局
瀑布流布局其核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的（随着自己内容动态变化高度），同时每个项目列表呈堆栈形式排列，最为关键的是，堆栈之间彼此之间没有多余的间距差存大,如下图：
1.jpg
实现瀑布流布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WaterFall</title>
<style>
.imgs{
//设置相对定位，让图片能够绝对定位
position: relative;
margin: 20px 150px;
}
//图片的样式，设置一样的宽度，绝对定位，在窗口大小发生改变的时候，使用类似于动画效果去渲染
.item{
width: 200px;
position: absolute;
margin: 5px;
transition: all 1s;
}
</style>
</head>
<body>
<div class="imgs">
<img src="http://i01.pic.sogou.com/cb4e9c56b6407929" alt="" class="item">
<img src="http://i04.pic.sogou.com/24475ce890affd74" alt="" class="item">
<img src="http://i03.pic.sogou.com/754215842d2e7b8f" alt="" class="item">
<img src="http://i04.pic.sogou.com/fefe1127a428d5d7" alt="" class="item">
<img src="http://i02.pic.sogou.com/fd9caa216e10cbfd" alt="" class="item">
<img src="http://i02.pic.sogou.com/6f0856038af8fed8" alt="" class="item">
<img src="http://i01.pic.sogou.com/cf403ec86cabcf5a" alt="" class="item">
<img src="http://i04.pic.sogou.com/f34c9343648a299e" alt="" class="item">
<img src="http://i01.pic.sogou.com/3be4b0564a82b91b" alt="" class="item">
<img src="http://i02.pic.sogou.com/3cd9b64594f071d0" alt="" class="item">
<img src="http://i01.pic.sogou.com/cb4e9c56b6407929" alt="" class="item">
<img src="http://i04.pic.sogou.com/24475ce890affd74" alt="" class="item">
<img src="http://i03.pic.sogou.com/754215842d2e7b8f" alt="" class="item">
<img src="http://i04.pic.sogou.com/fefe1127a428d5d7" alt="" class="item">
<img src="http://i02.pic.sogou.com/fd9caa216e10cbfd" alt="" class="item">
<img src="http://i02.pic.sogou.com/6f0856038af8fed8" alt="" class="item">
<img src="http://i01.pic.sogou.com/cf403ec86cabcf5a" alt="" class="item">
<img src="http://i04.pic.sogou.com/f34c9343648a299e" alt="" class="item">
<img src="http://i01.pic.sogou.com/3be4b0564a82b91b" alt="" class="item">
<img src="http://i02.pic.sogou.com/3cd9b64594f071d0" alt="" class="item">
<img src="http://i01.pic.sogou.com/cb4e9c56b6407929" alt="" class="item">
<img src="http://i04.pic.sogou.com/24475ce890affd74" alt="" class="item">
<img src="http://i03.pic.sogou.com/754215842d2e7b8f" alt="" class="item">
<img src="http://i04.pic.sogou.com/fefe1127a428d5d7" alt="" class="item">
<img src="http://i02.pic.sogou.com/fd9caa216e10cbfd" alt="" class="item">
<img src="http://i02.pic.sogou.com/6f0856038af8fed8" alt="" class="item">
<img src="http://i01.pic.sogou.com/cf403ec86cabcf5a" alt="" class="item">
<img src="http://i04.pic.sogou.com/f34c9343648a299e" alt="" class="item">
<img src="http://i01.pic.sogou.com/3be4b0564a82b91b" alt="" class="item">
<img src="http://i02.pic.sogou.com/3cd9b64594f071d0" alt="" class="item">
</div>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
//在渲染页面的时候先执行一次函数
WaterFall()
//通过设置left/top值来达到瀑布流的视觉效果
function WaterFall(){
//获取图片一列的个数，即容器宽度/图片宽度，将结果取整
var colLength = parseInt($('.imgs').width()/$('.item').width())
//定义一个空数组，存在每一列的图片的高度
var itemArr = []
//初始化这个数组
for(var i = 0; i < colLength; i++){
itemArr[i] = 0
}
//遍历图片元素
$('.item').each(function (){
//存储数组里面的最小值
var minVal = Math.min.apply(null,itemArr)
//存储这个最小值的下标
var minIndex = itemArr.indexOf(minVal)
设置left/top
$(this).css({
top: itemArr[minIndex],
left: minIndex * $(this).outerWidth(true)
})
//更新数组里存储的高度
itemArr[minIndex] += $(this).outerHeight(true)
})
}
//当页面大小发生改变的时候再去重新渲染
$(window).resize(function (){
WaterFall()
})
</script>
</body>
</html>
最后，附上这段代码的预览页面
