沿角度交错元素

Question

我正在尝试使用 javascript（jQuery 用于此问题）沿着一个角度错开随机数量的元素。

例如，这是我想要达到的结果：

所以我们可以有任意数量的框，它们的高度是随机的，但在所有框之间共享，并且它们交错的角度也是随机的。

我找到了一个我认为是解决方案的线程，但我可以弄清楚如何将其付诸实践：https://math.stackexchange.com/questions/143932/calculate-point-given-x-y-angle-and-distance

以下是我目前拥有的，请注意 DOM 和 CSS 不受限制，但需要响应的值。

( function( $ ) {
    'use strict';
  
  // Return random int from min -> max (inclusive).
  const rand = ( min, max ) => {
      min = Math.ceil( min );
      max = Math.floor( max );
      return Math.floor( Math.random() * ( max - min + 1 ) ) + min;
  };
  
  $( 'button' ).on( 'click', function( event ) {
    event.preventDefault();

    // Get container element.
    const $container = $( '.container' );
    
    // Remove any old boxes.
    $container.find( '.box' ).remove();
    
    // Generate line angle.
        const angle = rand( 22, 68 ); // degrees
    
        // Generate a random number of boxes to display.
    const boxCount = rand( 2, 4 );
    
    // Generate a random box height percentage.
    const boxHeight = rand( 30, 60 );
    
    // Add angle to container.
    $container.css( {
        '--angle': `${angle}deg`,
      '--height': `${boxHeight}%`
    } );

        // Create boxes.
    for ( let i = 0; i < boxCount; i++ ) {
    
        // Calculate offset x
        const x = Math.abs( ( boxHeight * ( i + 1 ) ) * Math.cos( angle * Math.PI ) );
    
      $( '<div>', {
        class: 'box',
        style: `margin-left: ${x}%`
      } ).appendTo( $container );
    }

  } ).trigger( 'click' );
  
  
  
} )( jQuery );

button {
  margin-bottom: 10px;
}

.container {
  position: relative;
}

.container .line {
  width: 200vw;
  height: 2px;
  background-color: red;
  transform-origin: 0% 50%;
  transform: rotate(var(--angle));
  position: absolute;
  top: 0;
  left: 0;
}

.container .box {
  width: 50%;
  background-color: darkblue;
}

.container .box:nth-child(odd) {
  background-color: darkgreen;
}

.container .box::before {
  content: '';
  display: block;
  padding-bottom: var(--height);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Randomise</button>
<div class="container">
  <div class="line"></div>
</div>

Answer 1

似乎您想找到 X-offset 个点，其中有一些 Y-coordinate Y_offset - 矩形的角。

这里 Y_offset 是当前矩形之前的累积高度（对于等高的情况，就像你的 boxHeight * ( i + 1 ) 一样），angle 是相对于垂直轴的所需角度。

X_Offset = Y_Offset * Math.tan( angle * Math.PI / 180 ));

沿角度交错元素

Stagger elements along an angle

javascript

css

geometry