случайное деление по горизонтали javascript

Question

Новое здесь. Я системный администратор со средним опытом работы с html / css / php. Я работал над modX, Wordpress и Joomla в прошлом, и теперь мой начальник хочет чего-то, что требует javascript или jquery знаний (в моем случае это меньше, чем c).

Описание проблемы : .x-container с высотой флюида и .x-столбцом, а .ult-new имеет фиксированную высоту 230px с полем, заданным в css (20px), и относительной позицией. x-столбец имеет ширину: 22% и относительное положение и поле справа: 4%. И мне нужно отображать случайным образом каждый ульт-новый внутри каждого x-столбца (внутри каждого x-контейнера). Эти элементы создаются динамически с php и короткими кодами. Поэтому мне нужно расположить их вертикально в случайных местах в этих столбцах и относительно друг друга (с полем сверху и снизу в 20px).

Как я понимаю, мне нужно посчитать высоту каждого столбца x и затем подсчитать количество элементов .ult-new в каждом из этих столбцов. И затем мне нужно позиционировать эти элементы как абсолютные и выполнить некоторую математику (сначала будет 0px от верхней границы плюс 20px, а затем второй элемент должен быть 230px от верхней плюс 20px margin top et c).

Как мне перевести это на javascript? Есть что-то еще, чего я не вижу? :)

<div class"x-container">

	<div class="x-column">

		<div class="ult-new">
    <!--some code here (text, hyperllinks etc)-->
		</div>
		
		<div class="ult-new">

		</div>
		
		<div class="ult-new">

		</div>

		<!--some code here (text, hyperllinks etc)-->

	</div>
	
	<div class="x-column">

		<div class="ult-new">

		</div>
		
		<div class="ult-new">

		</div>
		
		<div class="ult-new">

		</div>

	</div>

  <!--and many more x-column-->

</div>

<div class"x-container">

	<div class="x-column">

		<div class="ult-new">

		</div>
		
		<div class="ult-new">

		</div>
		
		<div class="ult-new">

		</div>

	</div>
	
	<div class="x-column">

		<div class="ult-new">

		</div>
		
		<div class="ult-new">

		</div>
		
		<div class="ult-new">

		</div>

	</div>

</div>

<!--and many more x-container-->

Answer 1

Я не совсем понимаю, что вы делаете, но лучшая информация, которую я могу вам дать, это jquery. теперь вам придется выполнить часть работы по его настройке, но я верю в вас!

var x;  // move horizontal
var y; // move vertical



 $('.YOURCLASS').css({"width":"50px","margin","50px","position":"absolute","transform":`translateX(${x})`,"transform":`translateY(${Y})`}) //sets styles
    $('.YOURCLASS').css("width") // gives the width of element
    var randomnum = Math.floor((Math.random() * 10) + 1); // random number 1-10
    y = randomnum
    x = randomnum
    // use position:absolute then pass x,y in