css3實現瀑布流多欄布局

 

還是放上我用GitHub Page搭建的靜態網頁的具體效果

 

　　最近發現在相冊中，因為我每個圖片的高度不同（寬度我強行設置了每個DIV占25%然后向左浮動）， 第二行圖片，會頂着第一行高度最大那個圖片的頂端，然后會和短圖片之前出現很大的空隙，看起來很丑。

 

效果圖：

 

很丑，對吧！gardening圖集方面因為我都選擇了1:1比例，所以還算整齊，但是要是和italic圖集放在一起，就層次不齊，特別丑陋了。

 

於是我上網搜了一下，發現了瀑布流布局這個神器！

由於不會后台語言，ajax也還沒學，我選擇了css3實現瀑布流的多欄布局

 

放一下部分代碼

html:(圖片都按照嵌套figure和div的格式放進article里就好了，下面的p是為了浮現文字)

（由於現在已經改用js把圖片集中放置，所以只剩下當時的截圖）

 

css:

這其中大部分代碼都是為了之前我寫的一篇：

實現不定長度的標題和段落在不同尺寸的圖片上在同一個位置水平居中（垂直可調）

有關本文的，只有：

 

• 設置最外層article的column-count:4 也就是四列布局（當然在手機中或者ipad中可以用媒體查詢改成2欄）
• column-gap:0 ;我使用chrome的時候，不設置這一句，有自動的列之間的間距
• 不要忘了給里層div寬度設置為100%或者不用設置，因為我之前為了控制4欄，給div設置了25%的寬度，這里一定要改過來，不然就是25%中的25%寬度了

#album>article{
    column-count: 4;
    column-gap:0 ;
}
#album>article>div{
    position: relative;
    background :linear-gradient(to top, black 0%,transparent 70%);

}
#album>article>div:hover img{
    opacity: 0.5;
}
#album>article>div:hover .introduction{
    opacity: 1;
}
#album>article figure{
    height: auto;
    font-size:0;
}
.top{
    position: absolute;
    top:20%;
    width: 100%;
}
.top>div{
    width: 100%;
    text-align: center;
}
.title{
    font-size: 3em;
    color:white;
    font-weight: 900;
    margin: 0 auto;
    opacity: 1;
}
.bottom{
    position: absolute;
    bottom:10%;
    width: 100%;
}
.bottom>div{
    width: 100%;
    text-align: center;
}
.introduction{
    font-size: 1.5em;
    color:white;
    margin: 0 auto;
    line-height: 1em;
    opacity: 0;
}
img{
    max-width: 100%;
}

 

效果：

 

 

感覺挺好的！如果覺得不好看大概是我的圖丑吧。。。