如何以非网格形式显示圆形

Question

如何以非网格形式显示圆形

4

我正在尝试使用CSS来实现下面图片中的布局。正如您所注意到的，它不是网格格式。我尝试了shape-outside: circle();但它并没有像我预期的那样起作用。我该怎么做呢？

<!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 {
    border-radius: 50%;
    shape-outside: circle();
    transition: transform .3s ease;
    padding: 5px;
  }
  img:hover {
    transform: scale(1.1);
  }
  </style>
</head>
<body>
  <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" />
</body>
</html>

- Tes3awy

3

有很多绝对定位。你需要使用JS来管理它们。我相信有插件可以做到这一点。 - Paulie_D

@Paulie_D，你能推荐一个插件吗？ - Tes3awy

2个回答

1

我已更新我的版本以生成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>

- John

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- symlink · Accepted Answer

您仍然可以使用网格布局，但只需使用align-self和justify-self属性，并使用start、center和end值来按您想要的方式交错它们：

img {
  border-radius: 50%;
  shape-outside: circle();
  transition: transform .3s ease;
  padding: 5px;
}

img:hover {
  transform: scale(1.1);
}

html, body{
   height: 100%;
   margin: 0;
}

body{
      background: rgba(0,0,0,0.3)
}

.grid{
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   height: 100vh;
   min-height: 500px;
}

.grid > img:nth-child(1){
  align-self: end;
  justify-self: center;
}

.grid > img:nth-child(3){
  align-self: end;
}

.grid > img:nth-child(4){
  justify-self: end;
}

.grid > img:nth-child(5){
  justify-self: center;
  align-self: center;
}

.grid > img:nth-child(7){
  justify-self: end;
}

.grid > img:nth-child(8){
  align-self: center;
  justify-self: center;
}

.grid > img:nth-child(9){
  justify-self: center;
  align-self: center;
}

<div class="grid">
  <img src="https://picsum.photos/50" />
  <img src="https://picsum.photos/70" />
  <img src="https://picsum.photos/60" />
  <img src="https://picsum.photos/100" />
  <img src="https://picsum.photos/75" />
  <img src="https://picsum.photos/90" />
  <img src="https://picsum.photos/40" />
  <img src="https://picsum.photos/85" />
  <img src="https://picsum.photos/45" />
</div>