如何優雅的添加友鏈

這只是我的一個示例，不同的主題風格，可能要稍作修改。也可以把友友放進一個卡片浮動感的樣式中。還可以改成隨機排序。這些改動需要一點點js技能哦。

首先添加以下html+css+js：

	<div class="friend_main">
		<div class="friend_box_outer hide">
			<div class="friend_box">
				<div class="friend_head"><a class="friend_head_link" href=""><img src="" /></a></div>
				<div class="friend_box_inner">
					<h2><a class="friend_title_link"></a></h2>
					<p></p>
				</div>
			</div>
		</div>
	</div>
	<p style="text-align: center;">--END--</p>
	<style>
	img {display: block; width: 100%;}
	.friend_head {
	width: 100%; margin-bottom: 12px
	}
	.friend_box {
	float: left;
	width: 24%;
		   margin-left: 12%;
	}
	.friend_box:nth-child(3n+1) {
		margin-left: 0;
	}
	.friend_box_outer {
	display: inline-block;
	width: 100%;
	}
	.friend_box_inner * {text-align: center;}
	.friend_box_inner a {text-decoration: none; color: #333;}
@media (max-width: 768px) {
	.friend_head {
	width: 24%;
	float: left;
	margin-right: 7%;
	margin-left: 12%;
	}
.friend_box {
	width: 100%;
	margin-left: 0;
	margin-bottom: 36px;
}
	.friend_box_inner {
		float: left;
		width: 48%;
		padding-top: 0;
	}
}
.hide {display: none}
	</style>
	<script>
	window.onload = function() {
		// init
		var fmain = document.querySelector(".friend_main");
		var outer = document.querySelector(".friend_box_outer").cloneNode(true);
		var friend_box = outer.querySelector(".friend_box");
		outer.innerHTML = "";
		outer.classList.remove('hide');
		// get json data
		var f_json_text = document.querySelector(".friend_json").value;
		var f_json = JSON.parse(f_json_text);
		// append child
		let outer_clone, fclone;
		for (let x = 0; x < f_json.length; x++) {
			if (x % 3 == 0) {
				outer_clone = outer.cloneNode(true);
			}
			fclone = friend_box.cloneNode(true);
			fclone.querySelector(".friend_title_link").href = f_json[x].site;
			fclone.querySelector(".friend_head_link").href = f_json[x].site;
			fclone.querySelector(".friend_title_link").innerHTML = f_json[x].name;
			fclone.querySelector("p").innerHTML = f_json[x].slogan;
			fclone.querySelector("img").src = f_json[x].avatar;
			outer_clone.appendChild(fclone);
			if (x % 3 == 2 || x == f_json.length - 1) {
				fmain.appendChild(outer_clone);
			}
		}
		console.log('outer_clone', outer.innerHTML);
	}
	</script>

再把json數據寫進<textarea class="friend_json" style="display: none;"></textarea>，放在這段代碼的上面。

json數據格式：