瀑布流布局的原理及实现(瀑布流布局是什么)

瀑布流布局简而言之就是类似瀑布的布局,这么一讲大家可能还是不是很明白,来来来,那现在我给大家上一个常见的实例:

瀑布流分为横向与竖向两种,用图说话。

网页实现图片的瀑布流布局

瀑布流(横向)

网页实现图片的瀑布流布局

瀑布流(横向)

相信大家在百度上搜索图片的时候,网页图片的布局就是这样子的吧,当然还有一种瀑布流形式。

网页实现图片的瀑布流布局

瀑布流(纵向)

网页实现图片的瀑布流布局

瀑布流(纵向)

今天我们主要说说纵向瀑布流,这也是使用更为广泛的一种。

纵向瀑布流即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。那么规则是什么呢?

当第一排排满足够多的等宽图片时(如下图情况),自然而然地考虑到之后放置的图片会往下面排放。

网页实现图片的瀑布流布局

那么第六张图片,放置在什么位置呢?是下图的位置么?

网页实现图片的瀑布流布局

我们通过瀑布流算法实验得到,后面紧跟的第六张图片的位置应该是这个位置。

网页实现图片的瀑布流布局

为什么呢?

因为放置它之前,这一列的高度为所有列中最小,所以会放置在这个地方。

所以我们知道了,如果再继续放置下去,第七张图片应该是这个位置,对吗?

网页实现图片的瀑布流布局

通过瀑布流算法实验得出位置正确。

看懂这个图示应该就能理解了瀑布流的原理算法。

网页实现图片的瀑布流布局

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
  • 当图片加载完成,所有图片依次放置在最小的列数下面
  • 父容器高度取列表数组的最大值
初欣网资源整合來自网络收集或本人原創,转载请注明出处!若资源分享侵犯了你的版权,请联系博主,我們會在24H內刪除侵權資源!
初欣运营网 » 瀑布流布局的原理及实现(瀑布流布局是什么)