javascript - 围绕父级中点居中多个元素

Question

我必须围绕元素的中点 float 多个元素。目前在 css 中使用 display: table/display: table-cell 解决了这个问题。

这个解决方案的问题是每组 block 都必须包裹在一个额外的元素中，这使得响应式布局变得困难。此外，可见顺序不正确。

我想使用 javascript，通过使用 position: absolute 来对齐元素，但我不知道如何计算偏移量。另一种选择可能是动态创建每个组(取决于窗口宽度/高度)，并使用实际的 css(如下)来对齐元素。

html, body {
  height: 100%;
}

.blocks {
  display: table;
  margin-left: auto;
  margin-right: auto;
  max-width: 40em;
  width: 100%;
  height: 100%;
}

.group {
  display: table-cell;
  vertical-align: middle;
}

.block {
  background-color: rgb(50, 50, 50);
  color: rgb(255, 255, 255);
  height: 8em;
  line-height: 8em;
  margin: 1em;
  text-align: center;
  width: 8em;
}

/* Debug
------------------------------------------------ */
 .blocks {
  counter-reset: tile;
}
.block:before {
  counter-increment: tile;
  content: counter(tile);
}

<!-- small screens -->
<div class="blocks">
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

<hr>

<!-- large screens -->
<div class="blocks">
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

<!-- huge screens -->
<div class="blocks">
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="group">
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

...为了完整性，position:absolute 方法:

.blocks {
  margin-left: auto;
  margin-right: auto;
  max-width: 40em;
  position: relative;
}
.block {
  background-color: rgb(0, 225, 225);
  border: 1px solid white;
  box-sizing:border-box;
  height: 8em;
  line-height: 8em;
  position: absolute;
  text-align: center;
  width: 8em;
}
.block:nth-of-type(1) {
  top: 8em;
  left: 0;
}
.block:nth-of-type(2) {
  top: 4em;
  left: 8em;
}
.block:nth-of-type(3) {
  top: 0;
  left: 16em;
}
.block:nth-of-type(4) {
  top: 4em;
  left: 24em;
}
.block:nth-of-type(5) {
  top: 8em;
  left: 32em;
}
.block:nth-of-type(6) {
  top: 16em;
  left: 0;
}
.block:nth-of-type(7) {
  top: 12em;
  left: 8em;
}
.block:nth-of-type(8) {
  top: 8em;
  left: 16em;
}
.block:nth-of-type(9) {
  top: 12em;
  left: 24em;
}
.block:nth-of-type(10) {
  top: 16em;
  left: 32em;
}
.block:nth-of-type(11) {
  top: 20em;
  left: 8em;
}
.block:nth-of-type(12) {
  top: 16em;
  left: 16em;
}
.block:nth-of-type(13) {
  top: 20em;
  left: 24em;
}
.block:nth-of-type(14) {
  top: 24em;
  left: 16em;
}
/* Debug
------------------------------------------------ */
 .blocks {
  counter-reset: tile;
}
.block:before {
  counter-increment: tile;
  content: counter(tile);
}

<div class="blocks">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

理想情况下，布局会尊重窗口的宽度和高度。这样 block 总是适合当前的屏幕尺寸。可以用这样的东西来完成:

var cols = Math.floor(innerWidth / children[0].clientWidth)
var rows = Math.round(innerHeight / children[0].clientHeight)

我已经搜索了一段时间，但没有找到任何现有的解决方案。最接近的是:

• Position icons into circle
• Centre multiple elements within div using css
• Other elements wrap around center positioned div

顺便说一句，我的灵感来自 https://typekit.com/ ;)

Answer 1

知道了...一个基于百分比的解决方案，它创建了一个均匀间隔的网格。

感觉有点hacky，但应该可以:

function alignAround(elements, columns, gutter, weight) {

  var width = ((2 / 3) * 100) - (gutter / 2)
  var push = 100 - width

  var gutterCount = columns - 1
  var repeatAt = (columns * 2) - 1

  var firstShort = 1
  var lastShort = gutterCount
  var lastLong = repeatAt

  if (weight === 'odd') {
    firstShort = columns + 1
    lastShort = repeatAt
    lastLong = columns
  }

  if (columns > 1) {
    width = ((100 - (gutter * gutterCount)) / columns / 100) * 100
    push = (width + gutter) / 2
  }

  return Array.prototype.forEach.call(elements, function(element, index) {

    var styles = {
      width: width,
      height: width
    }

    if (columns > 1) {
      var i = index + 1

      styles.marginRight = gutter

      if ((i - firstShort) % repeatAt === 0) {
        styles.marginLeft = push
      }

      if ((i - lastShort) % repeatAt === 0) {
        styles.marginRight = push
      }

      if ((i - lastLong) % repeatAt === 0) {
        styles.marginRight = 0
      }
    } else if (columns === 1) {

      if (index & 1) {
        styles[weight === 'odd' ? 'margin-left' : 'margin-right'] = push
      } else {
        styles[weight === 'odd' ? 'margin-right' : 'margin-left'] = push
      }

    }

    for (var key in styles) {
      element.style[key] = styles[key] + '%'
    }
  })
}

alignAround(document.querySelectorAll('.block'), 4, 2)

html, body, .blocks {
  height: 100%;
}

.block {
  background: #e44;
  float: left;
}

/* Debug
------------------------------------------------ */
.blocks {
  counter-reset: tile;
}
.block:before {
  counter-increment: tile;
  content: counter(tile);
}

<div class="blocks">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

_{抱歉，代码没有注释...}