什么是瀑布流布局？
先来看个瀑布流布局的网站实例
瀑布流布局
从上面的网站中可以看出，瀑布流布局就是这种错落式的布局方式。它有一个特点，整个布局以列为单位，下一个区块总是放在总高度最短的那一列的下面。
实现
整体思路：通过js找出一行中高度最短的那列，然后通过绝对定位将区块放在那列的下方
step1
- 先显示很多不同高度的img，宽度可以不同，反正到时候都是设置成统一宽度的
-
http://via.placeholder.com/100x100接口可以用来模拟一张图片，100x100即图片的宽和高，通过设置不同的高度获取到很多图片
正常连续多张图片的显示
step2
- 将图片的position设置成absolute
.waterfall{
position: relative;
}
.waterfall img{
width: 100px;
margin: 10px;
position: absolute;
}
- 编写js控制图片位置
//获取图片的宽度
var imgWidth = $('.waterfall img').outerWidth(true)
//列数 = 外层容器宽度 / 图片宽度
var colCnt = Math.floor($('.waterfall').width() / imgWidth)
//定义一个存放每列列高的数组
var colHeight = []
//根据列数初始化数组
for(var i=0; i<colCnt; i++){
colHeight[i] = 0
}
//获取数组中最小值下标
var minIndex = colHeight.indexOf(Math.min.apply(null, colHeight))
//对于每个img找到数组中列高最小的位置进行绝对定位
$('.waterfall img').each(function(){
$(this).css({
left: minIndex * imgWidth,
top: colHeight[minIndex]
})
colHeight[minIndex] += $(this).outerHeight(true)
minIndex = colHeight.indexOf(Math.min.apply(null, colHeight))
})
注:
① outerWidth()方法返回第一个匹配元素的外部宽度,该方法包含padding和border
如需包含margin，使用outerWidth(true)，这样在css中设置的图片的margin会被计算在内，从而显示有间隔的效果。
整体效果
step3
step2已经实现了瀑布流布局，可是还是不够完善，变动页面的宽度，瀑布流布局并不能跟着变化，相当于根据初始页面的宽度进行了一次性布局。下面增加实现瀑布流布局跟着宽度变化
js代码改成如下
//获取图片宽度
var imgWidth = $('.waterfall img').outerWidth(true)
//列数 = 外层容器宽度 / 图片宽度
var colCnt = Math.floor($('.waterfall').width() / imgWidth)
//定义一个存放每列列高的数组
var colHeight = []
function waterfall(colCount){
//根据列数初始化数组
for(var i=0; i<colCount; i++){
colHeight[i] = 0
}
//获取数组中最小值下标
var minIndex = colHeight.indexOf(Math.min.apply(null, colHeight))
//对于每个img找到数组中列高最小的位置进行绝对定位
$('.waterfall img').each(function(){
$(this).css({
left: minIndex * imgWidth,
top: colHeight[minIndex]
})
colHeight[minIndex] += $(this).outerHeight(true)
console.log('colHeight', colHeight)
minIndex = colHeight.indexOf(Math.min.apply(null, colHeight))
console.log('minIndex',minIndex)
})
}
//首次布局等到图片到来在执行
$('.waterfall img').on('load', function(){
waterfall(colCnt)
})
//resize页面重新布局
$(window).on('resize', function(){
imgWidth = $('.waterfall img').outerWidth(true)
colCnt = Math.floor($('.waterfall').width() / imgWidth)
waterfall(colCnt)
})
注：在img的css中加入transition可以实现resize页面瀑布流布局变化的动画效果
最终效果
最终页面展示
