教你做炫酷的蜂巢式圖片牆

之前博主寫了幾篇博文都是屬於前端基礎技術的總結，這個周末打算發布兩到三篇博文來給大家點“干貨”。

之所以把話說這么早其實是想給自己點壓力，免得又偷懶跳票了....

幾個月前瀏覽過一個外國的扁平化網站，里面的正六邊形圖片很炫酷，給了我很深的印象，這兩天試着做了下。

廢話不多說，奉上我的隨興之作！

 

看到這里，我想先說一句：MH的獵友們！請！頂！我！

六邊形的圖片牆，它的好處在哪呢？普通正方形的圖片排版起來比較死板，沒有新意。而正六邊形的圖片不僅顯得很炫酷，而且還有其特殊的規則感。

有的人肯定會說了，我直接拿PS切一個出來不就好了？干嘛還要用代碼寫？答案就是當你把框架寫好了，只需要更換圖片地址url即可，而不需要每一張都要處理，關鍵是代碼也比較簡單。

首先我們先分析一下：

怎么做一個六邊形？其實是三個矩形div旋轉得到的，例如中間橫着的矩形。

先假定所需的邊長為：100px，那矩形的寬，也就是紅線所示為多長？對角線為2倍邊長，所以寬為根號3倍的邊長，大概是173px。

結構如下：

<div class="box">
     <div class="first"></div>
     <div class="second"></div>
     <div class="third"></div>
</div>

這里外面包了個類名為box的div是為了方便多個六邊形時布局，不用太過關注。

將三個div絕對定位，以使它們重合。並正逆方向旋轉其中兩個：

 .first{
            height: 100px;
            width: 173px;
            background-color: red;
            position: absolute;
        }
 .second{
            height: 100px;
            width: 173px;
            background-color: blue;
            position: absolute;
            -webkit-transform:rotate(60deg);
        }
 .third{
            height: 100px;
            width: 173px;
            background-color: green;
            position: absolute;
            -webkit-transform:rotate(-60deg);
        } 

得到正六邊形：

接下來就是如何把圖片也裁成六邊形，先在第一個div中插入圖片：

    <div class="box">
        <div class="first">
            <img class="firstImg" src="26_120414101155_1.jpg" width="173px" height="200px">
        </div>
        <div class="second"></div>
        <div class="third"></div>
    </div>

注意：圖片的寬度為div的寬度，高度為兩倍div高度。為了圖片不失真，最好把圖片尺寸的高寬比裁為 根號3比2的。

結果：

這里圖片還需要向上移動一點，這里告訴大家一個秘訣，那就是上移div高度的一半剛剛好，不用大家算了。

 .firstImg{
         margin-top: -50px;
  }

然后設置父級div的overflow:hidden

結果：

加入第二張圖片：

 <div class="box">
        <div class="first">
            <img class="firstImg" src="26_120414101155_1.png" width="173px" height="200px">
        </div>
        <div class="second">
            <img class="secondImg" src="26_120414101155_1.png" width="173px" height="200px">
        </div>
        <div class="third"></div>
 </div>

 

注意插入的圖片父級是旋轉過的，所以需要讓圖片轉回來，也就是轉父級div相反的角度。

.secondImg{
            -webkit-transform:rotate(-60deg);
        }

結果：

怎么讓它往右上呢？其實還是margin-top:-50px;這里要說下為什么，因為它的父級旋轉過了。這時再將圖片上移就不是我們視角的上方了，而是它“躺倒”了的爸爸div的上方。

然后讓它的父級overflow:hidden

結果：

大家這下看出來了吧，其實是三張相同的圖片用各自的部分拼出來的。

第三張同樣做法：1.跟父級相反方向旋轉 2.上移

大功告成：

邊框怎么做？其實思考下就明白，六邊形的邊其實是三個div的左邊框及右邊框圍成的。所以只用設置border-left及border-right。

但要注意最多3px，否則會出現缺口，像這樣：

OK，接下來我把整理后的代碼發給大家，只需要更改些參數即可，排版神馬的自己創意吧。

HTML部分：

<div class="box">
            <div class="first">
                <img class="firstImg" src="" width="190px" height="220px">
            </div>
            <div class="second">
                <img class="secondImg" src="" width="190px" height="220px">
            </div>
            <div class="third">
                <img class="thirdImg"  src="" width="190px" height="220px">
            </div>
</div>

 

CSS部分：

 　　　　.box{
            height: 100px;
            width: 190px;
            display: inline-block;
            position: relative;
        }
        .first{
            height: 110px;
            width: 190px;
            background-color: #ee6557;
            position: absolute;
            overflow: hidden;
            z-index: 999999;
            border-left: 2px solid #c8a200;
            border-right :2px solid #c8a200;
        }
        .second{
            height: 110px;
            width: 190px;
            -webkit-transform:rotate(60deg);
            background-color:#ee6557;
            position: absolute;
            overflow: hidden;
            border-left: 2px solid #c8a200;
            border-right :2px solid #c8a200;
        }
        .third{
            height: 110px;
            width: 190px;
            -webkit-transform:rotate(-60deg);
            background-color: #ee6557;
            position: absolute;
            overflow: hidden;
            border-left: 2px solid #c8a200;
            border-right :2px solid #c8a200;
        }
        .firstImg{
            margin-top: -55px;
        }
        .secondImg{
            -webkit-transform:rotate(-60deg);
            margin-top: -55px;
        }
        .thirdImg{
            -webkit-transform:rotate(60deg);
            margin-top: -55px;
        }

 

感謝您的瀏覽，希望能對您有所幫助。