CSS+JS实现一个蜂窝布局效果

yycvip

1、什么是蜂窝布局


蜂窝布局，顾名思义，其灵感来源于自然界中蜜蜂的蜂巢结构。蜂巢由一系列紧密排列的正六边形单房组成，这种结构在具有出色的空间利用效率。
蜂窝布局是一种基于六边形单元排列的布局方式，类似于蜂巢的结构。每个六边形单元紧密相邻，形成连续且无缝的二维平面或三维空间覆盖。
六边形是二维平面上能够紧密排列且不留空隙的最佳形状之一，因此蜂窝布局能够最大化地利用空间。
蜂窝布局具有独特的视觉效果，能够给人一种有序、和谐的美感。
蜂窝布局通常用于企业门户网站、相册展示等，通过六边形单元的排列来展示图片、图标等元素，能够为用户提供更加丰富的视觉体验和操作选择。

2、怎么实现蜂窝布局

1. <template>
   
2.   <div class="container">
   
3.     <div class="line" v-for="(items, index) in imgList" :key="index">
   
4.         <div class="item" v-for="it in items.children" :key="it">
   
5.             <img :src="it" alt="" />
   
6.         </div>
   
7.     </div>
   
8.   </div>
   
9. </template>

复制代码

1. <style scoped lang="scss">
   
2. $n:10;
   
3. $size: 100vw / $n;
   
4. 
   
5. .container {
   
6.     overflow: hidden;
   
7.     padding: 30px 0;
   
8.     .line {
   
9.         display: flex;
   
10.         .item {
    
11.             width: $size;
    
12.             height: $size;
    
13.             img {
    
14.                 flex-shrink: 0;
    
15.                 width: $size;
    
16.                 height: $size;
    
17.                 outline: 1px solid #1890ff;
    
18.             }
    
19.         }
    
20.     }
    
21. }
    
22. </style>

复制代码

▲ 效果图-1


以上是基础布局的代码， 共4行，每行10张图片。为了自适应和方便计算，在CSS中设置变量$n代表每行图片的个数，$size代表每张图片的宽高。

首先，我们需要创建一个CSS样式来呈现六边形。这可以通过使用CSS的clip-path属性或者通过组合多个div元素来形成六边形。为了简化，我们使用clip-path。

只需要给 img 加上一行如下CSS代码，即可把每张图片裁剪成六边形的形状。

1. clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

复制代码

效果如下：



▲ 效果图-2

可以看到每张图片之间太过紧密，没有任何的缝隙，可以通过调整clip-path的顶点坐标百分比来给每张图片加上间隙。

1. clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);

复制代码

蜂窝布局的关键在于每个六边形相对于其上方和下方六边形的水平偏移。我们可以使用CSS设置在页面上的位置以形成蜂窝布局。在偶数行中，六边形需要水平偏移半个宽度，以与下方的六边形正确对齐。

只需要给 .line 偶数行元素设置属性transform，值为每个元素宽度的一半 $size / 2 即可。

1. .line {
   
2.     display: flex;
   
3.     // 设置水平偏移，实现错位
   
4.     &:nth-child(even) {
   
5.         transform: translateX($size / 2);
   
6.     }
   
7.     // 解决偏移后，每行元素在垂直方向上间隙过大的问题
   
8.     &:nth-child(n + 2) {
   
9.         margin-top: -$size / 6;
   
10.     }
    
11. }

复制代码

▲ 效果图-3


通过效果图-3发现，偶数行开头会有空白，那该怎么解决这个问题呢？首先我们要思考一个问题，隔行偏移往左偏移好还是往右偏移好呢？

答案是往左偏移好。因为往左偏移时我们可以在末尾追加一个元素去填补这个空白，如果往右偏移空白在开头位置并不容易去处理。因此往左偏移好更好，那就需要把 .line 偶数行元素的transform值设为负数。

1. .line {
   
2.     display: flex;
   
3.     // 设置水平偏移，实现错位
   
4.     &:nth-child(even) {
   
5.         transform: translateX(-$size / 2);
   
6.     }
   
7.     // 解决偏移后，每行元素在垂直方向上间隙过大的问题
   
8.     &:nth-child(n + 2) {
   
9.         margin-top: -$size / 6;
   
10.     }
    
11. }

复制代码

1. <style scoped lang="scss">
   
2. $n: 9;
   
3. $size: 100vw / $n;
   
4. 
   
5. .container {
   
6.     overflow: hidden;
   
7.     padding: 30px 0;
   
8.     .line {
   
9.         display: flex;
   
10.         // 设置水平偏移，实现错位
    
11.         &:nth-child(even) {
    
12.             transform: translateX(-$size / 2);
    
13.         }
    
14.         // 解决偏移后，每行元素在垂直方向上间隙过大的问题
    
15.         &:nth-child(n + 2) {
    
16.             margin-top: -$size / 6;
    
17.         }
    
18.         .item {
    
19.             width: $size;
    
20.             height: $size;
    
21.             img {
    
22.                 flex-shrink: 0;
    
23.                 width: $size;
    
24.                 height: $size;
    
25.                 outline: 1px solid #1890ff;
    
26.                 clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    
27.             }
    
28.         }
    
29.     }
    
30. }
    
31. </style>

复制代码

最后，在加上交互效果即可。当鼠标放到某张图片上时，该图片放大，周围其它图片缩小。