什么是瀑布流
瀑布流布局,作为一种现代网页设计中的创新布局方式,以其独特的视觉风格和流畅的用户体验在众多网站设计中脱颖而出。这种布局模式被形象地称为“瀑布流”,因其形态酷似自然界的瀑布,内容模块按照不规则的垂直顺序排列,每一列高度各异,如同水流般自由流淌。
瀑布流布局的核心特征
1.多列等宽不等高:瀑布流布局以多列的形式展现内容,每列宽度保持一致,而高度则根据所容纳内容的大小动态2.调整,形成错落有致的视觉效果。
动态加载与无限滚动:用户在浏览过程中,随着滚动页面,新的内容块会自动加载,实现了“无尽”的内容流,减少了分页操作,提升了浏览连贯性。
3.视觉吸引力:尤其擅长展示图片或视觉元素丰富的媒体内容,为用户提供了沉浸式的浏览体验,增加了页面的观赏性和互动性。
瀑布流布局的优点
1.提升用户体验:通过无限滚动的方式,用户无需频繁点击翻页,即可轻松浏览更多内容,增强了浏览的连续性和便捷性。
2.简化导航:将大量内容整合在单个页面上,减少了传统导航的复杂性,让用户能更直接地接触到信息。
3.增强参与度:鼓励用户通过持续滚动来探索更多内容,延长了用户在网站上的停留时间,增加了互动可能性。
4.视觉冲击力:尤其适合视觉驱动型网站,如图片分享平台,能够有效展示大量精美图片,提升页面整体吸引力。
设计瀑布流布局
1.先获取屏幕的大小
2.获取图片的宽度
3.确定第一行能放几张图(n张)
4,操作第 n+1 张 摆放它的位置,将其放在高度最小的那一列
5.获取每一列的高度
JS实操:
`window.onload = function() {
imgLocation(‘container’, ‘box’)
function imgLocation(parent, child) {
var cParent = document.getElementById(parent)
var cChild = cParent.getElementsByClassName(child)
var screenWidth = window.innerWidth
var imgWidth = cChild[0].offsetWidth
var num = Math.floor(screenWidth / imgWidth)
cParent.style.width = `${imgWidth * num}px`
// 操作第 num+1 张
var boxHeightArr = []
for (var i = 0; i < cChild.length; i++) {
if (i < num) { // 第一行
boxHeightArr.push(cChild[i].offsetHeight)
}
else {
// 找数组最小值
var minHeight = Math.min(...boxHeightArr)
var minIndex = boxHeightArr.indexOf(minHeight)
// 摆放图片
cChild[i].style.position = 'absolute'
cChild[i].style.top = minHeight + 'px'
cChild[i].style.left = cChild[minIndex].offsetLeft + 'px'
// 更新这一列的高度
boxHeightArr[minIndex] = boxHeightArr[minIndex] + cChild[i].offsetHeight
}
}
}
}
`
顺便吆喝一声,如果你计算机、软件工程、电子等相关专业本科及以上学历,欢迎来共事。前端/后端/测试等均可投→技术大厂机会。