我已更新我的版本以生成CSS,因此您不必使用Javascript版本。运行javascript fiddle,然后打开检查员并复制并粘贴控制台输出,将其放入您的CSS文件中。第一个fiddle生成CSS,第二个fiddle演示CSS的工作原理。它是动态的,可以在您添加更多照片时完美地工作,因为它从中心向外工作。
在控制台生成CSS:
https://jsfiddle.net/jp7q6xa1/5/
演示仅使用CSS定位:
https://jsfiddle.net/rda5c46j/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Circles</title>
<style>
img {
position:absolute;
border-radius: 50%;
shape-outside: circle();
transition: transform .3s ease;
padding: 5px;
}
img:hover {
transform: scale(1.1);
}
.container {
position:relative;
border:1px solid black;
width:1000px;
height:1000px
}
</style>
<script>
function overlaps(x1, y1, radius1, x2, y2, radius2) {
var xDistance = x1 - x2;
var yDistance = y1 - y2;
var sumOfRadii = radius1 + radius2;
var sumOfRadiiSquared = sumOfRadii * sumOfRadii;
var distanceSquared = xDistance * xDistance + yDistance * yDistance;
return distanceSquared < sumOfRadiiSquared;
}
function adjustLayout(containerID) {
var container = document.getElementById(containerID);
var images = container.querySelectorAll("img");
var minGapBetweenCircle = 10;
var plottedCircleInfo = [];
var radius, plotX, plotY;
var centerX = container.offsetWidth / 2;
var centerY = container.offsetHeight / 2;
var plotXYRadius = 1;
var plotXYRadians = 0;
var radius = 50;
var maxRadius = 40;
var minRadius = 50;
var CSS = ".container {position:relative} .container img {position:absolute;border-radius:50%};";
for (var i = 0; i < images.length; i++) {
var failed = true;
while (failed) {
radius = Math.floor(Math.random() * (maxRadius - minRadius + 1)) + minRadius;
var plotXYRadiusOffset = plotXYRadius + Math.random() * 10;
plotX = centerX + Math.cos(plotXYRadians) * plotXYRadiusOffset;
plotY = centerY + Math.sin(plotXYRadians) * plotXYRadiusOffset;
failed = false;
for (var c = 0; c < i; c++) {
var circle = plottedCircleInfo[c];
if (overlaps(circle.m_xPos, circle.m_yPos, circle.m_radius, plotX, plotY, radius + minGapBetweenCircle)) {
failed = true;
break;
}
}
plotXYRadians += 0.01;
if (plotXYRadians > Math.PI * 2) {
plotXYRadius += 1;
plotXYRadians -= Math.PI * 2;
}
}
plotXYRadians += Math.PI;
var smaller = Math.random() + 0.5;
if (minRadius > 20) {
minRadius-= smaller;
maxRadius-= smaller * 0.66;
}
//console.log(plotX, plotY, radius);
CSS += ".container img:nth-child("+ (i + 1) +") { left:" + (plotX - radius) + "px; top:"+ (plotY - radius) + "px;width:" + (radius * 2) + "px;height:" + (radius * 2) + "px;}";
images[i].style.left = (plotX - radius) + "px";
images[i].style.top = (plotY - radius) + "px";
images[i].style.width = (radius * 2) + "px";
images[i].style.height = (radius * 2) + "px";
plottedCircleInfo.push({m_xPos : plotX, m_yPos : plotY, m_radius : radius});
}
console.log(CSS);
}
</script>
</head>
<body>
<div id="spreadCircles" class="container">
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
<img src="https://picsum.photos/100" />
</div>
<script>adjustLayout("spreadCircles");</script>
</body>
</html>