Javascript之折叠 的图片墙

今天给大家带来的是动态的折叠的照片墙，利用了flex布局有点技巧，值的一看，废话不多说，直接上代码

   <div class="panels">
        <div class="panel panel1">
              <p>Hey</p>
              <p>Let's</p>
              <p>Dance</p>
        </div>
        <div class="panel panel2">
              <p>Give</p>
              <p>Take</p>
              <p>Receive</p>
        </div>
        <div class="panel panel3">
              <p>Experience</p>
              <p>It</p>
              <p>Today</p>
        </div>
        <div class="panel panel4">
              <p>Give</p>
              <p>All</p>
              <p>You can</p>
        </div>
        <div class="panel panel5">
              <p>Life</p>
              <p>In</p>
              <p>Motion</p>
        </div>
  </div>

以上就是本次案例的结构部分，有兴趣的朋友可以跟着步骤敲一下，会你有意想不到的结果。
css部分
我们先把html body的标签的样式写上

html {
          box-sizing: border-box;
          background:#ffc600;
          font-family:'helvetica neue';
          font-size: 20px;
          font-weight: 200;
        }
        body {
          margin: 0;
        }

接下来注意了我们要设置一个有趣的样式

*, *:before, *:after {
          box-sizing: inherit;
        }

是不是扩展性更好呢？
接下来我们依次来写样式，接下来有难度了注意，

.panels {
          min-height:100vh;//这里的的vh代表的是视口的宽度相当于100%
          overflow: hidden;
          display:flex;//这里是css3.0里面的布局方式，它的好处我得写一天，简单的说就是适应不同的屏幕，可控性强，不需要浮动 
        }

        .panel {          
          background:#6B0F9C;
          box-shadow:inset 0 0 0 5px;
          rgba(255,255,255,0.1);
          color:white;
          text-align: center;
          //align-items居中对齐弹性盒的各项 <div> 元素：
          //下面有个css3里面的函数cubic-bezier这里面包含四个值，  0~1，自定义速度，
          align-items:center;
          transitio:
            font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
            flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
            background 0.2s;
          font-size: 20px;
          background-size:cover;
          //这个是是以内容的位置来定位
          background-position:center;
          //平均分
          flex:1;
          //也是定义弹性盒子水平居中
          justify-content: center;
          align-items: center;
          display: flex;
          //一看这个就是定义方向的，这个代表垂直方向
          flex-direction: column;
        }
``
***上图片***

        .panel2{background: url(img/2.jpg);}    
        .panel3{background: url(img/3.jpg);}
        .panel4{background: url(img/4.jpg);}
        .panel5{background: url(img/5.jpg);} 

接下来更复杂一点了

 .panel > * {
          margin:0;
          width: 100%;
          transition:transform 0.5s;
          flex: 1 0 auto;
          display: flex;
          justify-content: center;
          align-items: center;
       }
        .panel > *:first-child{
          transform: translateY(-100%);
        }
        .panel.open-active > *:first-child,
        .panel.open-active > *:last-child{
        transform: translateY(0);
        }
        .panel > *:last-child{
          transform: translateY(100%);
        }
        .panel p {
          text-transform: uppercase;
          font-family: 'Amatic SC', cursive;
          text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 
          14px rgba(0, 0, 0, 0.45);
          font-size: 2em;
        }
        .panel p:nth-child(2) {
          font-size: 4em;
        }
        .panel.open {
          font-size:40px;
          flex:5;
        }
        .cta {
          color:white;
          text-decoration: none;
        }
<script type="text/javascript">
          const panels = document.querySelectorAll('.panel');
          function toggleOpen(){
            this.classList.toggle('open');
          }
          function toggleActive(e){
            if(e.propertyName.includes('flex')){
                this.classList.toggle('open-active');
            }           
          }
          panels.forEach(panel => 
          panel.addEventListener('click', toggleOpen));
          panels.forEach(panel =>           panel.addEventListener('transitionend',toggleActive)); 
    </script>

这里就不给大家解释了，不懂的可以在下面给我了留言，感觉不错的请点个赞，激励我在写下去吧。哈哈哈。另外我刚才看了一下，由于编辑器尺寸的原因，所以大家多担待。