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

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

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

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

瀑布流(横向)

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

瀑布流(横向)

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

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

瀑布流(纵向)

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

瀑布流(纵向)

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

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

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

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

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

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

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

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

为什么呢?

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

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

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

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

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

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

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
  • 当图片加载完成,所有图片依次放置在最小的列数下面
  • 父容器高度取列表数组的最大值

原创文章,作者:mjj,如若转载,请注明出处:https://www.36wp.cn/2203.html

(0)
上一篇 2022年5月30日 下午4:16
下一篇 2022年5月30日 下午4:19

相关推荐

  • 时而情人,时而朋友

    男人喜欢一种变戏法的游戏,他时而变成你的情人,时而变成你的朋友。 游戏规则他要来定,时间地点他要来定,情人朋友他要来定……女人只是游戏的参与者,她没有支配权。 很明显是一个不公平的...

    2021年1月23日
  • 爱玩游戏看电子书的婚后男孩是不负责任的表现吗?

    爱玩游戏看电子书的婚后男孩是不负责任的表现吗? 昨天跟老婆聊天中突然说初欣整天就知道玩游戏,看小说跟个小孩子一样。其实玩不玩游戏,看不看小说并不能代表什么,人各有志,爱好不同而已。...

    2020年11月12日
  • 抖音运营怎么做 抖音运营的注意事项

    对抖音账号来说,肯定也需要做好运营工作,但是也要先去了解一下运营工作到底应该怎么做才行,另外还有一些注意事项需要引起重视,我马上给各位介绍一下。 一、重点关注完播率完播率对流量起决...

    2022年9月14日
  • 只有心甘情愿为你买单的男人,才是你应该找的男人

    看一个男人对一个女人的态度,就看他为女人买单的态度。 两人吃完饭,男人不看菜单就结账。——他正恋着你。 吃完饭,男人跟你AA制。——他对你一点儿意思都没有。 结账时,男人说:我没带...

    2021年1月17日
  • 判断有没有队伍的标准:你有没有开除过人?

    我们再来看看,你叫什么有没有队伍?搭班子之前,我先用一个方法检验,你有没有班子?定战略之前,我先用一个方法检验,你有没有战略?第三个叫带队伍之前,我给你句话叫,有没有队伍? 很多人...

    2022年3月13日
  • 强扭的瓜不甜,不再勉强任何一份感情

    不舒服的感情,往往是痛苦,若是勉强自己,只能忍受委屈,让别人成全。 那天在外面吃过晚饭后,走路回来,走路的时候,一粒沙子突然掉进鞋里,离家还有一半路程,打算回家才把沙子倒出来,但另...

    2020年11月26日
  • 从「需求」到「目的」,剖析吸引力的本质

    在本篇正式开始之前,我想先分享一个有趣的案例,这是我一哥们的真实经历,他在已经有女朋友的前提下,被一个高段位绿茶勾引,后来彻底爱上了那个绿茶,后又被绿茶狠狠地玩弄与抛弃。整个事情之...

    2022年3月25日
  • 写作的诀窍是什么?常见的写作方法有哪些?

    很多人在写作时,经常有写不出东西的困惑,或者看了很多,有很多想法,但提笔时,就卡壳了。他们认为是自己的生活面比较窄,其实很多大作家,比一般人的生活面还窄,所以写不出东西并不是生活贫...

    2021年7月20日
  • 情之语

    亲不亲,一要看血脉是否相连,二要看走动是否频繁,三要看联系是否紧密。 亲情,是需要保养的,犹如钢刀需要擦拭,公路需要养护,房舍需要修缮。血脉再近,若久久疏远,老死不相往来,热腾腾的...

    2022年3月12日
  • 如何从零开始学做电商 新手入行前的几点知识

    电商即电子商务,是指以信息网络技术为手段,以商品交换为中心的商务活动; 也可理解为在互联网、企业内部网和增值网上以电子交易方式进行交易活动和相关服务的活动,是传统商业以互联网为媒介...

    2022年9月14日

发表回复

您的电子邮箱地址不会被公开。