站長(zhǎng)資訊網(wǎng)在之前的文章《CSS3怎么給背景圖片添加動(dòng)態(tài)變色效果》中，我們介紹了創(chuàng)建變色背景圖像動(dòng)畫的方法，讓網(wǎng)頁(yè)顯得高級(jí)感十足！這次我們來(lái)聊聊使用CSS3 column系列屬性怎么實(shí)現(xiàn)瀑布流布局，感興趣的朋友可以去了解一下~
我們提到CSS響應(yīng)布局的，就會(huì)想要使用Grid和Flexbox來(lái)實(shí)現(xiàn)，其實(shí)它們也有一些局限性。像瀑布流布局這種，就無(wú)法用它們來(lái)簡(jiǎn)單實(shí)現(xiàn)。
這其中的原因就是瀑布流一般來(lái)說(shuō)都是寬度一致，但是高度是根據(jù)圖片自適應(yīng)的。并且圖片的位置也是根據(jù)在上方圖片的位置而定的。
那么如何使用純CSS3實(shí)現(xiàn)瀑布流布局呢？我們可以利用CSS3 column系列屬性！
下面我們就先直接上代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body, html { position: relative; width: 100%; height: 100%; background: #4f000b; font-family: "PT Mono", monospace; } .masonry { -moz-column-count: 1; column-count: 1; /* 設(shè)置列數(shù) */ -moz-column-gap: 0; column-gap: 0; /* 設(shè)置列間距 */ counter-reset: item-counter; } /* 根據(jù)不同的屏幕寬度 設(shè)置不同的列數(shù)*/ @media screen and (min-width: 400px) { .masonry { -moz-column-count: 2; column-count: 2; } } @media screen and (min-width: 600px) { .masonry { -moz-column-count: 3; column-count: 3; } } @media screen and (min-width: 800px) { .masonry { -moz-column-count: 4; column-count: 4; } } @media screen and (min-width: 1100px) { .masonry { -moz-column-count: 5; column-count: 5; } } .item { box-sizing: border-box; -moz-column-break-inside: avoid; break-inside: avoid; padding: 10px; counter-increment: item-counter; } .item__content { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 220px; font-size: 40px; color: #360007; background: currentColor; box-sizing: border-box; color: #720026; } .item__content:hover { background: #9b0034; } .item__content:before { position: absolute; top: 0; left: 0; font-size: 13px; width: 2em; height: 2em; line-height: 2em; text-align: center; font-weight: bold; background-color: #222; content: counter(item-counter); } .item__content--small { color: #ce4257; height: 100px; } .item__content--small:hover { background: #d66274; } .item__content--medium { color: #ffc093; height: 175px; } .item__content--medium:hover { background: #ffd8bc; } .item__content--large { color: #ff7f51; height: 280px; } .item__content--large:hover { background: #ff9d7a; } </style> </head> <body> <div class="masonry"> <div class="item"> <div class="item__content"> </div> </div> <div class="item"> <div class="item__content item__content--small"> </div> </div> <div class="item"> <div class="item__content item__content--medium"> </div> </div> <div class="item"> <div class="item__content item__content--small"> </div> </div> <div class="item"> <div class="item__content item__content--medium"> </div> </div> <div class="item"> <div class="item__content"> </div> </div> <div class="item"> <div class="item__content item__content--large"> </div> </div> <div class="item"> <div class="item__content item__content--medium"> </div> </div> <div class="item"> <div class="item__content item__content--small"> </div> </div> <div class="item"> <div class="item__content"> </div> </div> <div class="item"> <div class="item__content item__content--large"> </div> </div> <div class="item"> <div class="item__content"> </div> </div> <div class="item"> <div class="item__content item__content--small"> </div> </div> <div class="item"> <div class="item__content item__content--large"> </div> </div> <div class="item"> <div class="item__content item__content--medium"> </div> </div> <div class="item"> <div class="item__content item__content--small"> </div> </div> <div class="item"> <div class="item__content item__content--medium"> </div> </div> <div class="item"> <div class="item__content"> </div> </div> <div class="item"> <div class="item__content item__content--small"> </div> </div> </div> </body> </html>
效果如下圖所示：
ok，瀑布流布局實(shí)現(xiàn)了！那么下面分析一下上述代碼，給大家介紹幾個(gè)關(guān)鍵的css屬性：
-
@media查詢：可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式
@media mediatype and|not|only (media feature) { CSS-Code; }
-
column-count屬性：指定某個(gè)元素應(yīng)分為的列數(shù)。 -
column-gap屬性：指定列間距。
column-gap: length|normal; length 一個(gè)指定的長(zhǎng)度，將設(shè)置列之間的差距 normal 指定一個(gè)列之間的普通差距。 W3C建議1EM值
-
break-inside屬性：描述了在多列布局頁(yè)面下的內(nèi)容盒子如何中斷，如果多列布局沒有內(nèi)容盒子，這個(gè)屬性會(huì)被忽略。上例中：
.item { break-inside: avoid; box-sizing: border-box; padding: 10px; }
break-inside:avoid為了控制文本塊分解成單獨(dú)的列，以免項(xiàng)目列表的內(nèi)容跨列，破壞整體的布局。
-
counter-increment屬性：遞增一個(gè)或多個(gè)計(jì)數(shù)器值，通常用于counter-reset屬性和content屬性。例如上例中：
.item { counter-increment: item-counter; } .item__content:before { content: counter(item-counter); }
PHP中文網(wǎng)平臺(tái)有非常多的視頻教學(xué)資源，歡迎大家學(xué)習(xí)《css視頻教程》！
