likes
comments
collection
share

深入解析实现网站的三栏布局，淘宝的瀑布流布局

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

前言

当你进入一个网站或者手机APP时，首先映入眼帘的是这个网站或手机APP的一个基本布局；如果这个布局足够的巧妙，你应该会有一种眼前一亮的感觉。一个高质量的网站或者手机APP，就应该有自己独特的布局来提高用户体验感。

三栏布局

是什么？

顾名思义，三栏布局就是在网页上以平铺方式展现的左中右三列布局，其特点在于，左右两列可固定在网页两侧，中间一列永远居中，且当网页宽度大于左右两列宽度之和时，中间一列可随网页整体宽度的变化而变化（简单来说就是两端固定，中间自适应）。

深入解析实现网站的三栏布局，淘宝的瀑布流布局

实现

首先不考虑加载顺序，浏览器左中右加载

  • 准备html:
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>
</body>
  • css
<style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            height: 100px;
        }

        .left {
            width: 200px;
            background: pink;
        }

        .middle {
            background: #878080;
        }

        .right {
            width: 200px;
            background: pink;
        }
    </style>

弹性

我们只需要在父容器添加 display: flex;属性，在中间容器上添加flex: 1;就能实现效果。

calc() + inline-block

将块级元素转变为行内块元素，这样三个容器就会排列在同一行，再利用计算属性计算出中间容器的宽度，在中间容器上加上calc(100vw - 400px);，当然这要已知两边容器的宽度才行。

注：在body上设置一个 font-size: 0;属性，要不然容器之间会有间隔。

calc() + float

这里还是要用到计算属性，只不过把三个容器弄到同一行用到了float,注意要将这三个容器都设置为浮动，左容器向左浮动，右容器向右浮动，中间容器向左浮动。

float + margin

简化一下，废弃计算属性，同样利用浮动让三个容器在同一行，左容器向左浮动，右容器向右浮动，中间容器加上属性margin:0 200px，一样可以实现三栏布局。

考虑加载顺序，我们想要让中间主要部分先加载出来，两边后加载出来，这就要聊到Css中的经典布局圣杯布局和双飞翼布局

圣杯布局

思路

将中间html结构放在其他两个前面，优先渲染中间部分，父容器增加 padding: 0 200px;两边留有空间给左右容器，三个容器都添加向左浮动使其脱离文档流一行排列，左右两容器通过相对定位移动到父容器留有的的空隙。

代码实现

  • html:
  <div class="container">
        <div class="middle">middle</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
  • css:
 * {
            margin: 0;
            padding: 0;
        }

        .container {
            height: 100px;
            padding: 0 200px;
        }

        .middle,
        .left,
        .right {
            height: 100%;
            float: left;
        }

        .middle {
            width: 100%;
            background: rgb(100, 105, 100);
        }

        .left {
            width: 200px;
            background: pink;
            position: relative;
            left: -200px;
            margin-left: -100%;
        }

        .right {
            width: 200px;
            background: pink;
            position: relative;
            margin-right: -200px;
        }

双飞翼布局

思路

直接在中间容器中建立一个子容器用于放置内容，在子容器中设置margin-left和margin-right属性为左右两栏留出位置，同样要用到浮动，但是不需要相对定位了。

代码实现

  • html
 <div class="container">
        <div class="middle">
            <div class="inner">middle</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
  • css
 * {
            margin: 0;
            padding: 0;
        }

        .container {
            height: 100px;

        }

        .middle,
        .left,
        .right {
            float: left;
            height: 100%;
        }

        .middle {
            width: 100%;
            background: green;
        }

        .inner {
            height: 100%;
            padding: 0 200px;
        }

        .left {
            width: 200px;
            background: pink;
            margin-left: -100%;
        }

        .right {
            width: 200px;
            margin-left: -200px;
            background: pink;
        }

圣杯布局和双飞翼布局相对于其他方法实现三栏布局显得更加优雅，它更加注重了用户的体验。

瀑布流布局

是什么？

是一种比较流行的网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局会不断加载数据块并附加至当前尾部。就比如淘宝的推荐页面，让你有一直看下去的欲望。

深入解析实现网站的三栏布局，淘宝的瀑布流布局

Js实现原理

当第一排图片排列完毕后，我们拿着第二排第一张图片，把它排列在第一排高度最低的图片下面，然后这列高度需要加上这一张图片，后面的图片的摆放再次找最低的高度。

图解

第二排第一张图片排在高度最低的图片下面：

深入解析实现网站的三栏布局，淘宝的瀑布流布局 第二列计算高度时会加上两张图片的高度，第二排第二张继续排放在高度最低的下面：

深入解析实现网站的三栏布局，淘宝的瀑布流布局

接下来你应该知道第二排第三张的图片摆放位置了：

深入解析实现网站的三栏布局，淘宝的瀑布流布局

代码实现

window.onload = function () {
    // var wrap = document.getElementById('container')

    // console.log(wrap);
    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] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight
        }
    }
}


//取到父容器中的某一层子容器
function getChildElement(parent, content) {
    var contentArr = []
    var allContent = parent.getElementsByTagName('*')//[xxx]

    //遍历allContent把其中类名为 content 的容器都存到contentArr数组中
    for (var i = 0; i < allContent.length; i++) {

        //当前这个容器的类名是否为 content
        if (allContent[i].className == content) {
            contentArr.push(allContent[i])
        }

    }
    return contentArr
}

我准备了20张图片，只设置了Css一开始页面效果为：

深入解析实现网站的三栏布局，淘宝的瀑布流布局

装图片的div设置了浮动，一行排不下图片会挤下来。

引入上面的Js后：

深入解析实现网站的三栏布局，淘宝的瀑布流布局

这样就实现了瀑布流布局，非常美观且优雅。

小结

对于网站的布局方式还有很多，例如卡片式，分屏布局，网格布局等等，它们都有着自己的优势，都是为了更好地贴近用户，提升用户体验。大家可以多去尝试，尝试一下不同的布局方式，给你的设计增加一些创意和灵感。最后感谢各位的观看，本文如有错失，欢迎大家指正，码字不易，点个免费的赞吧٩(๑❛ᴗ❛๑)۶。

深入解析实现网站的三栏布局，淘宝的瀑布流布局

转载自:https://juejin.cn/post/7232310975176327227
评论
请登录