Wie erstelle ich ein Wasserfall-Layout mit reinem CSS3? Kurze Analyse der Säulenmethode-CSS-Tutorial-php.cn

Wie erstelle ich ein Wasserfall-Layout mit reinem CSS3? Kurze Analyse der Säulenmethode

青灯夜游

Freigeben： 2021-08-23 19:06:31

Original

2659 Leute haben es durchsucht

Im vorherigen Artikel „So fügen Sie Hintergrundbildern mit CSS3 dynamische Farbwechseleffekte hinzu“ haben wir die Methode zum Erstellen farbwechselnder Hintergrundbildanimationen vorgestellt, um Webseiten hochwertig aussehen zu lassen! Dieses Mal werden wir darüber sprechen, wie man die Eigenschaften der CSS3-Spaltenreihe verwendet, um das Wasserfall-Flow-Layout zu implementieren. ~

Wenn wir das responsive CSS-Layout erwähnen, möchten wir es mit Grid und Flexbox implementieren. Tatsächlich haben sie auch einige Einschränkungen. Dinge wie das Wasserfall-Flusslayout können mit ihnen nicht einfach implementiert werden.

Der Grund dafür ist, dass Wasserfallströme grundsätzlich die gleiche Breite haben, die Höhe aber entsprechend dem Bild adaptiv ist. Und die Position des Bildes basiert auch auf der Position des Bildes oben.

Wie kann man also reines CSS3 verwenden, um das Wasserfall-Flow-Layout zu implementieren? Wir können die Eigenschaften der CSS3-Spaltenserie nutzen!

Beginnen wir direkt mit dem Code:

<!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;   /* 设置列数 */
				-moz-column-gap: 0;
				column-gap: 0;  /* 设置列间距 */
				counter-reset: item-counter;
			}
			
			/* 根据不同的屏幕宽度 设置不同的列数*/
			@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>

Nach dem Login kopieren

Der Effekt ist wie im Bild unten gezeigt:

Wie erstelle ich ein Wasserfall-Layout mit reinem CSS3? Kurze Analyse der Säulenmethode

OK, das Wasserfall-Flow-Layout ist realisiert! Lassen Sie uns also den obigen Code analysieren und Ihnen einige wichtige CSS-Attribute vorstellen:

@media Abfrage: Für verschiedene Bildschirmgrößen können verschiedene Stile festgelegt werden@media 查询：可以针对不同的屏幕尺寸设置不同的样式

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

Nach dem Login kopieren

column-count属性：指定某个元素应分为的列数。
column-gap 属性：指定列间距。

column-gap: length|normal;
length    一个指定的长度，将设置列之间的差距    
normal    指定一个列之间的普通差距。 W3C建议1EM值

Nach dem Login kopieren

break-inside属性：描述了在多列布局页面下的内容盒子如何中断，如果多列布局没有内容盒子，这个属性会被忽略。
上例中：

.item { break-inside: avoid; box-sizing: border-box; padding: 10px; }

Nach dem Login kopieren

break-inside:avoid为了控制文本块分解成单独的列，以免项目列表的内容跨列，破坏整体的布局。

counter-increment

.item {
counter-increment: item-counter;
}

.item__content:before {
content: counter(item-counter);
}

Nach dem Login kopieren

Spalte -countAttribut: Gibt die Anzahl der Spalten an, in die ein Element unterteilt werden soll.

column-gap

break-inside

break-inside:avoid

counter-increment

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Wasserfall-Layout mit reinem CSS3? Kurze Analyse der Säulenmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!