純css瀑布流、Grid佈局

阿新 • • 發佈：2019-01-18

1、純css瀑布流

2、Grid佈局

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>實現瀑布流</title>
</head>
<body>

	<div id="content-wrap">
		
	</div>

<script>
    (function () {
		var wrap = document.getElementById('content-wrap');
		for (var i = 0; i < 18; i++) {

			// 2.2flex佈局：蛋疼（行與行是平行的）
			// var itemWrap = document.createElement('div');
			// itemWrap.setAttribute('class', 'item-wrap');
			// var item = document.createElement('div');
			// item.setAttribute('class', 'item');
			// itemWrap.append(item);
			// var itemChild = document.createElement('div');
			// itemChild.setAttribute('class', 'item-single');
			// item.append(itemChild);
			// itemChild.innerText = i+1;
			// wrap.append(itemWrap);
			//3.grid佈局
			var item = document.createElement('div');
			item.setAttribute('class', 'item');
			var itemChild = document.createElement('div');
			itemChild.setAttribute('class', 'item-single');
			item.append(itemChild);
			itemChild.innerText = i+1;
			wrap.append(item);
		}
	})()
</script>

</body>
<style>
	.item{
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid red;
		color: red;
	}

	/* 1.多列布局  2.1flex佈局：蛋疼（設定外容器的高度） */
	/* .item:nth-child(3),
	.item:nth-child(14),
	.item:nth-child(17),
	.item:nth-child(24),
	.item:nth-child(28),
	.item:nth-child(29),
	.item:nth-child(31),
	.item:nth-child(42){
		height: 50px;
		border: 1px solid gray;
		color: gray;
	}
	.item:nth-child(4),
	.item:nth-child(19),
	.item:nth-child(22),
	.item:nth-child(27),
	.item:nth-child(35),
	.item:nth-child(45){
		height: 180px;
		border: 1px solid yellowgreen;
		color: yellowgreen;
	}
	.item:nth-child(8),
	.item:nth-child(23),
	.item:nth-child(38),
	.item:nth-child(42),
	.item:nth-child(46),
	.item:nth-child(49){
		height: 200px;
		border: 1px solid blue;
		color: blue;
	} */
	/* 1.多列布局*/
	/* #content-wrap{
		column-count: 5;
		column-gap: 30px;
	}
	.item{
		break-inside: avoid;
	} */
	/* 2.1flex佈局：蛋疼（設定外容器的高度） */
	/* #content-wrap {
		display: flex;
		flex-flow: column wrap;
		width: 100%;
		height: 100vh;
	} */



	/* 2.2flex佈局：蛋疼（行與行是平行的） */
	/* .item-wrap:nth-child(14) .item,
	.item-wrap:nth-child(17) .item,
	.item-wrap:nth-child(24) .item,
	.item-wrap:nth-child(28) .item,
	.item-wrap:nth-child(29) .item,
	.item-wrap:nth-child(31) .item,
	.item-wrap:nth-child(42) .item{
		height: 50px;
		border: 1px solid gray;
		color: gray;
	}
	.item-wrap:nth-child(4) .item,
	.item-wrap:nth-child(19) .item,
	.item-wrap:nth-child(22) .item,
	.item-wrap:nth-child(27) .item,
	.item-wrap:nth-child(35) .item,
	.item-wrap:nth-child(45) .item{
		height: 180px;
		border: 1px solid yellowgreen;
		color: yellowgreen;
	}
	.item-wrap:nth-child(8) .item,
	.item-wrap:nth-child(23) .item,
	.item-wrap:nth-child(38) .item,
	.item-wrap:nth-child(42) .item,
	.item-wrap:nth-child(46) .item,
	.item-wrap:nth-child(49) .item{
		height: 200px;
		border: 1px solid blue;
		color: blue;
	}
	#content-wrap{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.item-wrap{
		display: flex;
		flex-direction: column;
		width: calc(100%/6);
	}  */


	

	/* 3.grid佈局 */
	#content-wrap{
		display: grid;
		grid-template-rows: repeat(5, 1fr);
		grid-template-columns: repeat(5, 1fr);
		grid-gap: 10px;
		grid-auto-flow: row dense;
	}
	.item-wrap{
		
	}  
	.item:nth-child(7){
		grid-column: 2/5;
		grid-row: 3/5;
	}
	.item:nth-child(9){
		grid-column: span 2;
		grid-row: span 2;
	}
</style>
</html>

純css瀑布流、Grid佈局

1、純css瀑布流 2、Grid佈局案例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>實現瀑布流</

純css瀑布流佈局

由於公司的專案需要才用到瀑布流佈局因為後臺返回的json直接迴圈出來的,所以不能做左右浮動的那種,所以才用到了瀑布流佈局 16年之前的瀑布流佈局基本都時基於js或者直接用jq外掛的,但是隨著技術的進步或更新,想用純css達到這樣的效果也是可以的話不多說直接上程式碼 CSS樣式是 .

關於瀑布流的佈局原理分析（純CSS瀑布流與JS瀑布流）

瀑布流又稱瀑布流式佈局，是比較流行的一種網站頁面佈局方式。即多行等寬元素排列，後面的元素依次新增到其後，等寬不等高，根據圖片原比例縮放直至寬度達到我們的要求，依次按照規則放入指定位置。為什麼使用瀑布流瀑布流佈局在我們現在的前端頁面中經常會用的到，它可以有效的降低頁面的複雜度，節

分享：純 css 瀑布流和 js 瀑布流

整體初始化 onload 其它一行 edi mar 排列 ref 分享一次純 css 瀑布流和 js 瀑布流純 css 寫瀑布流 1.multi-columns 方式：通過 Multi-columns 相關的屬性 column-count、column-ga

微信小程式實現css 瀑布流佈局方法

在微信小程式中經常使用瀑布流來進行頁面的佈局，今天就遇到了這樣的情況，之前是一直用flex佈局來著，但是flex佈局帶來的問題是圖片高度不同那麼進行佈局的時候有些圖片的下面就會留出很多富餘的空間這樣看著就不是很好了，所以在這裡採用瀑布流的方法：Multi-column,廢話少說上程式碼： ind

寫一個CSS瀑布流佈局

先看效果：再看看手機端：具體程式碼，這裡的圖片大家自行替換，不用我說了，，我用的是外鏈可能失效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

Android掃碼二維碼、美女瀑布流、知乎網易音樂、動畫源碼等

代碼安裝開發工具 -c dep 更多應用程序 strip 瀏覽器中 Android精選源碼 QRCode 掃描二維碼、掃描條形碼、相冊獲取圖片後識別、生... 一個簡潔好看的loading彈窗 Android用瀑布流展示美女圖片源碼

RecyclerView 實現縱向，橫向，和瀑布流的滾動佈局

實現縱向滾動 1，在app/build.gradle檔案，dependencies中新增如下內容 ----------------- compile ‘com.android.support:recyclerview-v7:24.2.1’ --------

css---標準流、盒模型、浮動

一、盒模型 1.1 盒子的區域一個盒子的主要屬性5個：width、height、padding、border、margin padding：內邊距 border：邊框 margin：外邊框 1.2 認識width、height 一個盒子的真實佔有的寬度：左bo

CSS—瀑布流效果

HTML程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流</title>

純css實現圖片瀑布流佈局

先看一下效果圖：瀑布流，又稱瀑布流式佈局。是比較流行的一種網站頁面佈局，視覺表現為參差不齊的多欄佈局，隨著頁面滾動條向下滾動，這種佈局還會不斷載入資料塊並附加至當前尾部。最早採用此佈局的網站是Pinterest，逐漸在國內流行開來。國內大多數清新

純CSS實現瀑布流佈局

首先一個頁面的佈局<div id="container-pro"> <div class="waterfall"> <div class="item"><img src="img/1.jpg"></div> <

css佈局、flex、響應式、grid

一、常見佈局型別表格佈局：原始佈局方式，利用表格的特性展示佈局，沒有頁面邏輯且大量冗餘程式碼，現在幾乎不用固定寬：常用960px，移動端縮放表現差，不友好流式：使用float實現動態浮動，各解析度下樣式無法保證 flex彈性盒子：簡潔且強大，主流使用 cs

【css】最簡單的瀑布流佈局方法

前言：用column-count就能實現簡單的瀑布流佈局一、程式碼 <body> <style> .parent { width:100%; -moz-co

四十一、瀑布流佈局（js,jquery,css3三種方式）

一、簡介 1. 實現瀑布流的方法： JavaScript 原生方法、 jquery 方法、 css3 的多欄佈局二、js 原生方法實現 -- 思想 1. 瀑布流的特點：等寬不等高 <

CSS實現瀑布流等分佈局效果，相容各大主流瀏覽器

效果如下：程式碼： <!DOCTYPE html> <html lang="en"> <head> <title>首頁</ti

純css實現瀑布流效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>純CSS3實現的瀑布流</title> <link

純CSS3多列的瀑布流佈局演示

網上的瀑布流佈局大部分都是通過JS來求定位，但現在css3也可以做到了，你不需要使用一點js，就可以做出一個反應快速的CSS3瀑布流佈局。 html程式碼： <div class="container"> <div class="waterfall"> <div clas

CSS網頁佈局方式--浮動流、定位流

網頁佈局方式定義：網頁的佈局方式就是瀏覽器如何對網頁中的元素進行排版主要分三種標準流浮動流定位流標準流（文件流/普通流）排版定義：瀏覽器預設的排版方式在css

CSS浮動&簡單瀑布流佈局

浮動（float） float屬性 left：元素向左浮動 right：元素向又浮動 none：元素不浮動 inherit：從父級繼承浮動屬性 clear屬性 l

純css瀑布流、Grid佈局

相關推薦