瀑布流布局是如何一步一步让你走进“消费陷阱”的!
一、什么是瀑布流布局?
电商系统的瀑布流布局(Waterfall layout),也称为瀑布流式布局,是一种在网页或移动应用程序中呈现内容的设计方式,它将不同大小的内容区块以瀑布流的方式依次排列,图片之间不是正好对齐的,而是错落有致,总有图片看不完全,让用户可以无限滚动地查看商品或内容,进而提高销售额,被广泛运用于电商网站和移动应用中。
二、瀑布流的实现原理及源代码
那么瀑布流的效果如何用前端技术实现呢?本文采用比较基础的HTML+CSS+JavaScript技术实现。
1. HTML
HTML里面放的东西很简单,就是一个总的容器container里嵌套很多小容器box,里面又嵌套一个box-img,box-img里放图片。有人说,干嘛嵌套这么多层啊?这是因为这样做方便我们增添样式和操作。
<div id="container">
<div class="box">
<div class="box-img">
<img src="./img/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="./img/2.jpg" alt="">
</div>
</div>
<div>
2. CSS
CSS中主要是通过浮动让图片一行一行排列,然后控制容器之间的间距,加上边框和阴影。这里container采用相对定位,因为绝对定位会脱离文档流。
* {
margin: 0;
padding: 0;
}
#container {
position: relative;
}
.box{
float: left;
padding: 5px;
}
.box-img{
width: 150px;
padding: 5px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
}
.box-img img{
width: 100%;
}
3.JavaScript
实现瀑布流最关键的就是JS部分,利用JavaScript计算图片的位置和大小,然后将它们排列在正确的位置上,实现动态效果。
具体来说是第一行的图片不动,然后从第二行第一张图片开始,计算出第一行高度最小的图片,然后接在它下面,修改图片的上边距和左边距,图片绝对定位,最后更新图片的高度,如此循环往复。
window.onload = function() {
imgLocation('container', 'box')
}
// 获取到所有要摆放的图片
function imgLocation(parent, content) {
var cparent = document.getElementById(parent)
// cparent 下的所有的第一层的子容器 box
var ccontent = getChildElement(cparent, content) // [ 装了20个div ]
// 从谁开始是需要被摆放位置的
var winWidth = document.documentElement.clientWidth
var imgWidth = ccontent[0].offsetWidth
var num = Math.floor(winWidth / imgWidth)
// 操作第 num+1 张图
var BoxHeightArr = []
for (var i = 0; i < ccontent.length; i++) {
// 前num张只要计算高度
if (i < num) {
BoxHeightArr[i] = ccontent[i].offsetHeight
} else {
// 我们要操作的box,把求最小值方法借给数组用
var minHeight = Math.min.apply(null, BoxHeightArr)
var minIndex = BoxHeightArr.indexOf(minHeight)
ccontent[i].style.position = 'absolute'
ccontent[i].style.top = minHeight + 'px'
ccontent[i].style.left = (imgWidth * minIndex) + 'px'
// 更新最矮的那一列的高度
BoxHeightArr[minIndex] += ccontent[i].offsetHeight
}
}
}
// 取到父容器中的某一层子容器
function getChildElement(parent, content) {
var contentArr = []
var allContent = parent.getElementsByTagName('div')
// 遍历allContent 把其中类名为 content 的容器都存到contentArr数组中
for (var i = 0; i < allContent.length; i++) {
// 当前这个容器的类名是否为 content
if (allContent[i].className == content) {
contentArr.push(allContent[i])
}
}
return contentArr
}
三、总结
瀑布流布局的主要优点是可以将大量内容呈现在一个页面中,从而提高用户体验和浏览效率。与传统的列表式布局不同,瀑布流布局的每个内容块大小不一,根据内容的高度自动排列,使得整个页面具有更好的美观性和趣味性。
转载自:https://juejin.cn/post/7216232268842582071