溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么用CSS3創(chuàng)建瀑布流布局

發(fā)布時(shí)間：2021-08-24 10:33:30 來(lái)源：億速云 閱讀：124 作者：chen 欄目：web開發(fā)

本篇內(nèi)容介紹了“怎么用CSS3創(chuàng)建瀑布流布局”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

我們提到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>

效果如下圖所示：

怎么用CSS3創(chuàng)建瀑布流布局

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)容盒子如何中斷，如果多列布局沒(mé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);
}

“怎么用CSS3創(chuàng)建瀑布流布局”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手