瀑布流布局简而言之就是类似瀑布的布局，这么一讲大家可能还是不是很明白，来来来，那现在我给大家上一个常见的实例:
瀑布流分为横向与竖向两种，用图说话。
瀑布流（横向）
瀑布流（横向）
相信大家在百度上搜索图片的时候，网页图片的布局就是这样子的吧，当然还有一种瀑布流形式。
瀑布流（纵向）
瀑布流（纵向）
今天我们主要说说纵向瀑布流，这也是使用更为广泛的一种。
纵向瀑布流即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。那么规则是什么呢？
当第一排排满足够多的等宽图片时（如下图情况），自然而然地考虑到之后放置的图片会往下面排放。
那么第六张图片，放置在什么位置呢？是下图的位置么？
我们通过瀑布流算法实验得到，后面紧跟的第六张图片的位置应该是这个位置。
为什么呢？
因为放置它之前，这一列的高度为所有列中最小，所以会放置在这个地方。
所以我们知道了，如果再继续放置下去，第七张图片应该是这个位置，对吗？
通过瀑布流算法实验得出位置正确。
看懂这个图示应该就能理解了瀑布流的原理算法。
Js代码：
var colCount //定义列数
var colHeightArry= [] //定义列高度数组
var imgWidth = $(‘.waterfall img’).outerWidth(true) //单张图片的宽度
colCount = parseInt($(‘.waterfall’).width()/imgWidth) //计算出列数
for(var i = 0 ; i < colCount; i ++){
colHeightArry[i] = 0
}
//[0,0,0]
$(‘.waterfall img’).on(‘load’,function(){
var minValue = colHeightArry[0] //定义最小的高度
var minIndex = 0 //定义最小高度的下标
for(var i = 0 ; i < colCount; i ++){
if(colHeightArry[i] < minValue){ //如果最小高度组数中的值小于最小值
minValue = colHeightArry[i] //那么认为最小高度数组中的值是真正的最小值
minIndex = i //最小下标为当前下标
}
}
$(this).css({
left: minIndex * imgWidth,
top: minValue
})
colHeightArry[minIndex] += $(this).outerHeight(true)
})
//当窗口大小重置之后，重新执行
$(window).on(‘resize’,function(){
reset()
})
//当窗口加载完毕，执行瀑布流
$(window).on(‘load’,function(){
reset()
})
//定义reset函数
function reset(){
var colHeightArry= []
colCount = parseInt($(‘.waterfall’).width()/imgWidth)
for(var i = 0 ; i < colCount; i ++){
colHeightArry[i] = 0
}
$(‘.waterfall img’).each(function(){
var minValue = colHeightArry[0]
var minIndex = 0
for(var i = 0 ; i < colCount; i ++){
if(colHeightArry[i] < minValue){
minValue = colHeightArry[i]
minIndex = i
}
}
$(this).css({
left: minIndex * imgWidth,
top: minValue
})
colHeightArry[minIndex] += $(this).outerHeight(true)
})
}
总结瀑布流布局原理
- 设置图片宽度一致
- 根据浏览器宽度以及每列宽度计算出列表个数，列表默认为0
- 当图片加载完成，所有图片依次放置在最小的列数下面
- 父容器高度取列表数组的最大值
版权声明：本文图片和内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送联系客服 举报，一经查实，本站将立刻删除，请注明出处：https://www.4kpp.com/19374.html
