JavaScript圣杯布局与双飞翼布局实现案例详解

2024-10-02 01:20:45

一、圣杯布局和双飞翼布局的功能介绍

圣杯布局和双飞翼布局是三栏布局中的两种布局方式，他们实现的效果是相同的，区别就是实现方法。
header和footer各自占领屏幕所有宽度，高度固定；
中间的outer是一个三栏布局；
三栏布局中left和right不变，center填充其他地方；
中间部分的高度是三栏中最高的区域的高度。

二、圣杯布局

高度如何自适应屏幕高度

其实这个并不是圣杯布局中的要求，圣杯布局是可以指定高度的，但是可以作为一个思考；
方法就是使用flex布局，将主轴设置为纵轴，再将outer的flex设为1，意思就是填充多余空白，即可达到自适应屏幕高度的效果。

body{
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}
.header{
    background-color:grey;
    height: 50px;
}
.footer{
    background-color:grey;
    height: 50px;
}
.outer{
    flex:1;
}

圣杯布局思路

将center盒子写在最前面，保证center盒子最先渲染；
给outer盒子指定padding-left 和 padding-right值，留出left和right的位置；
三个盒子都设置float:left，这时left和right就会被挤到下一行；
left设置margin-left:-100%;相对定位+left:-left的宽度；right设置margin-left=-right的宽度；相对定位+right:-right的宽度即可将两个盒子归位。

圣杯布局代码

<style>
  * {
      padding: 0;
      margin: 0;
      text-align: center;
  }
  html{
      height: 100%;
  }
  body{
      display: flex;
      flex-direction: column;
      height: 100%;;
  }
  .header{
      width: 100%;
      height: 50px;
      background-color:dimgray;
  }
  .footer{
      width: 100%;
      height: 50px;
      background-color:dimgray;
  }
  .outer{
      flex:1;
      padding-left: 100px;
      padding-right: 200px;
  }
  .center{
      float: left;
      background-color: darkslateblue;
      height: 100%;
      width: 100%;
  }
  .left{
      float: left;
      width: 100px;
      margin-left: -100%;
      background-color: burlywood;
      height: 100%;
      position: relative;
      left: -100px;
  }
  .right{
      float: left;
      width: 200px;
      margin-left: -200px;
      height: 100%;
      position: relative;
      right: -200px;
      background-color: cyan;
  }
</style>
<body>
    <div class="header">header</div>
    <div class="outer">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

三、双飞翼布局

双飞翼布局的思路

给三个盒子都设置为左浮动；
center的宽度设为100%；
left设置margin-left:-100%；right设置margin-left=-right的宽度即可将两个盒子归位，但是将center的两端挡住了；
在center盒子中再写一个content盒子，设置margin-left和margin-right为两侧的宽度，content盒子作为内容。

双飞翼布局的代码

<style>
    *{
        padding: 0;
        margin: 0;
    }
    html{
        width: 100%;
        height: 100%;
        text-align: center;
    }
    body{
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
    }
    .header{
        background-color:grey;
        height: 50px;
    }
    .footer{
        background-color:grey;
        height: 50px;
    }
    .outer{
        flex:1;
    }
    .center{
        float: left;
        width: 100%;
        background-color: darkslateblue;
        height: 100%;
    }
    .left{
        float: left;
        margin-left: -100%;
        width: 100px;
        background-color: burlywood;
        height: 100%;
    }
    .right{
        float: left;
        width: 200px;
        background-color: cyan;
        margin-left: -200px;
        height: 100%;
    }
    .content{
        margin-left: 100px;
        margin-right: 200px;
        height: 100%;
    }
</style>
<body>
    <div class="header">header</div>
    <div class="outer">
        <div class="center">
            <div class="content">content</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

圣杯布局和双飞翼布局的区别

圣杯布局是利用padding将中间部分留出，再利用定位、margin的方式将左右盒子归位，因此不需要外层div；
双飞翼布局是先设置中间盒子的宽度为100%，再用margin移动左右盒子覆盖了中间盒子的两侧，再将outer中间加入一个盒子，留出两侧的margin值，达到三栏布局的效果。

四、圣杯布局和双飞翼布局面试问题

回答：圣杯布局和双飞翼布局都可以实现三栏布局，即两侧宽度固定，中间自适应的效果。圣杯布局是先用padding将中间内容留出，再定位左右盒子到相应位置；而双飞翼布局首先将中间盒子的宽度设为了100%，在定位左右盒子的时候会覆盖中间盒子的两端，这样就需要在中间盒子中在定义一个盒子，并留出margin的两侧值。两种布局都需要把center盒子写在left和right前面，为了最先渲染。

到此这篇关于JavaScript圣杯布局与双飞翼布局实现案例详解的文章就介绍到这了,更多相关JS圣杯布局与双飞翼布局内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JavaScript实现瀑布流布局的3种方式

前言今天逛闲鱼的时候观察到每一行的高度不是相同的,经了解才知道原来这是一种瀑布流布局,感觉挺有意思,于是决定研究一下,在网上也找了一些方案,实现瀑布流大概有3种方式. 一.JS 实现瀑布流思路分析 1.瀑布流布局的特点是等宽不等高. 2.为了让最后一行的差距最小,从第二行开始,需要将图片放在第一行最矮的图片下面,以此类推. 3.父元素设置为相对定位,图片所在元素设置为绝对定位.然后通过设置 top 值和 left 值定位每个元素. 代码实现 <!DOCTYPE html> <html
如何用JS实现网页瀑布流布局

前言: 瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 什么是瀑布流布局: 先看效果: 图片多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为了方便理解,在此先给上html.css代码不完整html代码: <div id="container"> <d
js瀑布流布局的实现

本文实例为大家分享了js实现瀑布流布局的具体代码,供大家参考,具体内容如下原理: 1.瀑布流布局,要求进行布局的元素等宽,然后计算元素的宽与浏览器的宽度之比,得到需要布置的列数. 2.创建一个数组,长度为列数,数组元素为每一列已布置元素的总高度.(一开始为0). 3.将未布置的元素,依次布置到高度最小的那一列,然后更新这一列的高度,就得到了瀑布流布局实现布局 <body> <div id="content"> <div id="box&qu
一行JavaScript代码如何实现瀑布流布局

写在前面一行 JavaScript 代码究竟可以完成什么布局?今天我们就来用一行 JavaScript 代码完成经典布局的一种,瀑布流布局. 所谓的瀑布流布局就是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 瀑布流的特点: 琳琅满目: 整版以图片为主,大小不一的图片按照一定的规律排列. 唯美: 图片的风格以唯美的图片为主. 操作简单: 在浏览网站的时候,只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你
JS实现动画中的布局转换

在用JS编写动画的时候,经常用会到布局转换,即在运动前将相对定位转为绝对定位,然后执行动画函数.下面给大家分享一个运用原生JS实现的布局转换的Demo,效果如下: 以下是代码实现,欢迎大家复制粘贴及吐槽. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl
js实现九宫格布局效果

本文实例为大家分享了js实现九宫格布局效果的具体代码,供大家参考,具体内容如下效果代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #container{ width: 1200
JavaScript实现瀑布流布局详解

目录需求思路代码实现实现效果问题和修正修正后效果总结需求所谓瀑布流布局,就是含有若干个等宽的列,每一列分别放置图片.视频等,放置的元素都是等宽的,因此可能是不等高的.新的元素到来时,会插入高度较低的那一列,这样形成参差的.视觉上像瀑布一样的布局. 这里简化一下,只要两列等宽布局展示图片即可. 思路两列布局,直接使用flex布局实现即可.不过,这里不能设置align-items为center,如果设置了将会使图片列居中显示,不符合瀑布流的视觉效果.我设置left和right两列
Javascript 模拟mvc实现点餐程序案例详解

MVC模式是一个比较成熟的开发模式.M是指业务模型,V是指用户界面,C则是控制器,使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可以使用不同的表现形式.其中,View的定义比较清晰,就是用户界面.今天就来模拟使用MVC模式开发一个点餐程序,当然,只是就此案例来说明MVC在前端的实现参考,并没有完整的实现.程序很简单,与传统的MVC三层架构不谋而合. 首先,先介绍一下场景:顾客进到餐馆,拿着菜单点餐,服务员记录并发到后端厨房,厨师接到订单,按照订单的菜品去制作,制作完毕通知服务员取餐,
JavaScript 使用Ckeditor+Ckfinder文件上传案例详解

目录一.准备工作二.解压三.开始集成一.准备工作 Ckeditor_4.5.7_full + Ckfinder_java_2.6.0 二.解压 1.解压ckeditor,和平常文件解压相同,正常解压即可 2.解压ckfinder,解压完成后进入ckfinder文件夹下,发现有CKFinderJava-2.6.0.war文件,继续解压. 3.注意看红框部分三.开始集成 1.准备工作完成,将图1中的ckeditor,及图3中的ckfinder文件夹拷贝到我们自己的项目的WebContent
JavaScript定时器设置、使用与倒计时案例详解

本文实例讲述了JavaScript定时器设置.使用与倒计时案例.分享给大家供大家参考,具体如下: 1.设置定时器定时器,适用于定时执行的任务中.在BOM的window对象中,有这样的两个函数是用于设置定时器 setTimeout(function,delay);//设置延时多少毫秒执行该函数,只执行一次,返回值是一个id setInterval(function,delay);//设置间隔多少毫米一直执行该函数,执行多次,返回值是一个id 两者的区别就在于setTimeout方式只执行一次,而
javascript验证form表单数据的案例详解

直接po截图和代码下面是CheckFormDemo.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>验证表单的案例</title> <link rel="stylesheet" type="text/css" href="../css/body.css" rel=&q
JavaScript圣杯布局与双飞翼布局实现案例详解

目录一.圣杯布局和双飞翼布局的功能介绍二.圣杯布局高度如何自适应屏幕高度圣杯布局思路圣杯布局代码三.双飞翼布局双飞翼布局的思路双飞翼布局的代码圣杯布局和双飞翼布局的区别四.圣杯布局和双飞翼布局面试问题一.圣杯布局和双飞翼布局的功能介绍圣杯布局和双飞翼布局是三栏布局中的两种布局方式,他们实现的效果是相同的,区别就是实现方法. header和footer各自占领屏幕所有宽度,高度固定: 中间的outer是一个三栏布局: 三栏布局中left和right不变,center填充其他
Java图形化界面设计之布局管理器之BorderLayout案例详解

边界布局管理器把容器的的布局分为五个位置:CENTER.EAST.WEST.NORTH.SOUTH.依次对应为:上北(NORTH).下南(SOUTH).左西(WEST).右东(EAST),中(CENTER),如下图所示. 特征: l 可以把组件放在这五个位置的任意一个,如果未指定位置,则缺省的位置是CENTER. l 南.北位置控件各占据一行,控件宽度将自动布满整行.东.西和中间位置占据一行;若东.西.南.北位置无控件,则中间控件将自动布满整个屏幕.若东.西.南.北位置中无论哪个位置没有控件
Android AS创建自定义布局案例详解

先创建一个title.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" andr
antd Vue实现Login登录页面布局案例详解附带验证码验证功能

效果 Login页面  <template> <d
JavaScript DOMContentLoaded事件案例详解

DOMContentLoaded 事件字面上看,它会在dom加载完成后触发. 与window.onload事件非常相似,但有一定区别: DOMContentLoaded 事件是在文档完全加载和解析之后触发: window.onload 事件不但文档完全加载和解析完毕,相关资源都要加载完毕,比如图片和CSS文件等: 下一个问题是什么时候dom加载完毕,这得从浏览器渲染说起,浏览器显示网页的过程可以做如下描述: 1. 请求得到html文档,根据文档请求更多的img,css及其它资源文件: 2.
JavaScript offsetParent案例详解

1. offsetParent定义:那么offsetParent就是距离该子元素最近的进行过定位的父元素(position:absolute relative fixed),如果其父元素中不存在定位则offsetParent为:body元素 2. 根据定义分别存在以下几种情况元素自身有fixed定位,父元素不存在定位,则offsetParent的结果为null(firefox中为:body,其他浏览器返回为null) 元素自身无fixed定位,且父元素也不存在定位,offsetPa