查看“模板:菱形”的源代码

<noinclude>原作地址：[https://wiki.biligame.com/tools/%E7%94%A8%E6%88%B7%E8%AE%A8%E8%AE%BA:141211391 tools]</noinclude>
==正比==
<div class="honeycomb">
{{#loop:i|1|{{#expr:{{#ask:[[分类:密探]]|format=count}}-1}}|<div class="hex-cell">{{密探ask2|{{#ask: [[分类:密探]]|?姓名|format=array|limit=1|offset={{#var:i}}|link=none|sort=创建日期|order=desc|mainlabel=-}}}}</div>}}{{#loop:i|1|6|<i></i>}}
</div>

==猫猫==
<div class="honeycomb">
{{#loop:i|1|40|<div class="hex-cell">[[文件:小头像-猫绒绒·{{#ask: [[分类:密探]]|?姓名|format=array|limit=1|offset={{#var:i}}|link=none|sort=创建日期|order=asc|mainlabel=-}}.png]]</div>}}{{#loop:i|1|6|<i></i>}}
</div>

==心纸==
<div class="honeycomb">
<div class="hex-cell">[[文件:狐虎度假游-广陵王-虎头帽3.png]]</div>
<div class="hex-cell">[[文件:狐虎度假游-广陵王-虎头帽2.png]]</div>
<div class="hex-cell">[[文件:狐虎度假游-广陵王-虎头帽1.png]]</div>
<div class="hex-cell">[[文件:狐虎度假游-广陵王-告白气球3.png]]</div>
<div class="hex-cell">[[文件:狐虎度假游-广陵王-告白气球2.png]]</div>
<div class="hex-cell">[[文件:狐虎度假游-广陵王-告白气球1.png]]</div>
<div class="hex-cell">[[文件:狐虎度假游-广陵王-收衣袋3.png]]</div>
<div class="hex-cell">[[文件:狐虎度假游-广陵王-收衣袋2.png]]</div>
<div class="hex-cell">[[文件:狐虎度假游-广陵王-收衣袋1.png]]</div>
</div>

<bstyle>/*<pre>*/
:root {
	--hex-width:75px;
	--hex-gap:5px;/* 设置蜂巢间距，修改这个即可 */
	--hex-height: calc(var(--hex-width) * 1.1547);/* 六边形高度 ≈ 宽度 × 1.1547 */
	--hex-margin-bottom: calc(var(--hex-height) * -0.25);/* 负margin叠加，实现竖直重叠 */
}
@media screen and (min-width: 768px) {
	:root {
		--hex-width: 100px;
	}
}
@media screen and (min-width: 992px) {
	:root {
		--hex-width: 125px;
	}
}
.honeycomb {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--hex-gap);/* 只设置间距 */
	padding-bottom: calc(var(--hex-height) * 0.25);/* 补偿末行偏移 */
	margin: 0 auto;
}
.hex-cell {
	width: var(--hex-width);
	height: var(--hex-height);
	background:#DFC3B5;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	margin-bottom: var(--hex-margin-bottom);
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-weight: bold;
	transition: transform 0.3s;
	box-sizing: border-box;
}
.honeycomb>i {
	width: var(--hex-width);
	margin: 0;
}
.hex-cell.placeholder {
	visibility: hidden;
	pointer-events: none;
}
/* 偶数行偏移（0为第一行）*/
.hex-cell.even-row {
	transform: translateX(calc((var(--hex-width) + var(--hex-gap)) / 2));
}
/*</pre>*/</bstyle>
<bstyle>/*<pre>*/</style>
<script>
$(function () {
	adjustHexGrid();
	//$(window).on('resize', $.debounce(250, adjustHexGrid));
	new ResizeObserver(function () {
		clearTimeout($.resizeTimer);
		$.resizeTimer = setTimeout(adjustHexGrid, 100);
	}).observe($('.honeycomb')[0]);
});
function adjustHexGrid() {
	const $container = $('.honeycomb');
	// 获取 CSS 变量
	const hexWidth = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--hex-width'));
	const gapStyle = getComputedStyle($container[0]).getPropertyValue('gap');
	const horizontalGap = gapStyle.includes(' ')
		? parseFloat(gapStyle.split(' ')[1])
		: parseFloat(gapStyle) || 0;
	const containerWidth = $container.width();
	const cellsPerRow = Math.floor((containerWidth + horizontalGap) / (hexWidth + horizontalGap));
	const groupSize = 2 * cellsPerRow - 1;
	// 移除旧的占位符
	$container.find('.hex-cell.placeholder').remove();
	// 获取当前排序元素（不含占位符）
	const $realCells = $container.find('.hex-cell').not('.placeholder');
	$realCells.removeClass('even-row');
	const total = $realCells.length;
	for (let i = 0; i < total; i += groupSize) {
		const isFullGroup = (i + groupSize <= total);
		const endIndex = isFullGroup ? i + groupSize - 1 : total - 1;
		const startEven = i + cellsPerRow;
		// 插入占位符仅在完整组中
		if (isFullGroup) {
			$('<div class="hex-cell placeholder"></div>').insertAfter($realCells.eq(endIndex));
		}
		// 给偶数行添加类
		for (let j = startEven; j <= endIndex; j++) {
			$realCells.eq(j).addClass('even-row');
		}
	}
}
// 防抖函数，避免resize频繁调用
$.debounce = function (wait, func) {
	let timeout;
	return function () {
		const context = this, args = arguments;
		clearTimeout(timeout);
		timeout = setTimeout(() => func.apply(context, args), wait);
	};
};
</script>
<style>/*</pre>*/</bstyle>