网页多栏布局&可拖动改变每一栏宽度

网页多栏布局&拖动改变每一栏的宽度

网页多栏布局是一个非常常见的布局方式，实现网页多栏布局的方式有很多种，但是要把分成多栏的网页变成点击某一栏可以拖拽改变宽度的那又是另一个麻烦事。

接下来我就给大家说一下我的一个简单的实现方式

• 首先要明确我们需要达到的效果：
  1. 我们的网页多栏布局，不论是横向的多栏还是竖向多栏。【我以横向三栏排列为例】
  2. 每一栏拖动边框时可以动态的改变宽度。

     以网页中有横排三栏为例，拖动第一栏边框，压缩第二栏宽度，增加第一栏宽度，不影响第三栏宽度。

先说一下HTML结构

    <div class="content">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>

这个HTML结构想必不用多说，大家都懂。

多栏布局

1. 我们可以采用传统的CSS布局方式，就是利用浮动float，让三个盒子横向排列，然后在调整间距，以此达到三栏布局的目的。

2. 采用CSS3中给的分栏属性：

   column-width 栏目宽度 
   column-count 栏目列数 
   column-gap 栏目距离 
   column-rule 栏目间隔线
   

3. 利用flex布局,直接给最外层的盒子加上一行：

   display:flex;
   

实现三栏的方法有多种，网上有很多教程，不会的可以去百度一下。

拖拽改变宽度

我们要实现前面我说的效果里的第二条，也有几条路，比如：

1. 手写JavaScript代码。
2. 利用插件

这两条路，想必大多数人都会选择第二条。自己动手去写JavaScript代码，委实太过麻烦，而且还不一定能达到要求，所以我在这里就给大家说一下插件。

• 如果你的网页是有两栏布局需要拖动改变宽度，那么建议大家去看一下一个UI：

  IView UI：附上这个UI的地址

  IView UI 热心为我们提供了 Split面板分割功能，我们可以直接使用。

• 如果你的网页有三栏，还需要达到我前面说的效果，那么再给大家一个插件地址：

  Split.js：附上Split.js插件地址

  Split.js是基于jquery的一个插件，功能非常强大，具体的大家一看便知。

Split.js和Vue相结合

• Split.js官网上给我们提供了，Split.js和React相结合的用法，下面我就来说一下和Vue结合怎么用。

如果你的代码结合了webpack等自动化打包工具【没用的我就不说了，直接按照官网走即可】，Split.js官网也给我们提供了npm的下载安装方式，我来说下怎么用，怎么写：

大前提：你的HTML代码结构必须和Split.js需要的代码结构相同，具体里面设置了什么样式不管。

最好在代码的class属性里规定好排版的方向 ，例如：

<div id="id1" class="left split split-horizontal"></div>

• 首先下载Split.js插件

  npm i split.js -S
  

• 第二步安装插件：

  // 我使用的是CommonJS的安装方式
  // 直接在需要用到的组件里引用：
  var Split = require('split.js')
  

• 第三步初始化插件

  Split(['#id1', '#id2', '#id3'], {
      // 初始化 三栏布局,每一栏的占比【百分比】
     sizes:[20,30,50],
      // 每一栏可以缩小到的最小宽度
      minSize: [50, 50, 400]
  });
  

  这段代码，如果你改改id名直接放到你的js代码里肯定是行不通的，我们需要两步走：

  1. 在method方法里新建一个函数：init()【函数名字无所谓】
  2. 把那段初始化的代码扔到这个函数里，然后在created或者mounted里调用即可。

• 插件初始化，还不算完，Split.js还有必须要有的CSS样式：

  /* split.js插件所需样式 */
    .split {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  
      overflow-y: auto;
      overflow-x: hidden;
    }
  
    .gutter {
      background-color: #eee;
  
      background-repeat: no-repeat;
      background-position: 50%;
  
      cursor: move;
      cursor: grab;
      cursor: -moz-grab;
      cursor: -webkit-grab;
    }
  
    .gutter:active {
      cursor: grabbing;
      cursor: -moz-grabbing;
      cursor: -webkit-;
    }
  
    .split.split-horizontal,
    .gutter.gutter-horizontal {
      height: 100%;
      float: left;
    }
  

  如果直接从官网上复制split所需的CSS样式代码有一个大坑：官网上的代码里，在CSS样式里引入了两张图片这个地方极易出错，因为我们并没有那两张图，而且那两行样式删了也无所谓。【我博客上的样式就是我改过之后，用着没问题。】

---

到此，split插件的用着基本就没啥问题了，不过不要忘了引入jquery。

发一下福利：

• 我们有些时候还会碰到一种情况，就是排版布局时，需要让整个页面占一屏。
• 一旦超过了一屏，那就让超过的那一栏出现滚动条。

这个实现起来也很简单：

1. 给盒子设置高度100%，确保盒子占满需要占的部分。
2. 然后设置：overflow-y:scroll;即可。横向的不要可以隐藏：overflow-x:hidden

还有一个和Vue集合的插件：vue-split-pane，也是实现分栏操作的：

插件地址：vue-split-pane，需要的小伙伴可以去了解一下。