likes
comments
collection
share

瀑布流布局是如何一步一步让你走进“消费陷阱”的!

作者站长头像
站长
· 阅读数 30

一、什么是瀑布流布局?

电商系统的瀑布流布局(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
评论
请登录