Форум

Sokoljr · #1 (**permalink**) 08.08.2017, 17:47

Добрый вечер, кто может подсказать или дать ресурс какой-то, я хочу реализовать блок, в котором будут находится иконки, разных размеров, и раскиданы по элементу в разных частях, в хаотическом порядке

На ум пока ничего не приходит, разве что создать массив элементов и каждому элементу присваивать свойства, но все равно не понятно

Заранее спасибо

Nexus · #2 (**permalink**) 08.08.2017, 17:52

Если список элементов уже есть, то нужно просто пробежаться по каждому из них и задать css свойства position - absolute, top и left рандомно.
А если элементов нет, то создать их и сделать тоже самое.
https://javascript.ru/math.random

Sokoljr · #3 (**permalink**) 08.08.2017, 18:01

Nexus,
попробую, спасибо

рони · #4 (**permalink**) 08.08.2017, 18:13

Sokoljr,
https://javascript.ru/forum/misc/351...tml#post230736

j0hnik · #5 (**permalink**) 08.08.2017, 19:39

если нужны определенные иконки или картинки, нужно будет создать массив, или дать им имя числом а потом доставать при помощи переменной.

<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
	div{position: absolute;}
</style>
</head>
<body>
	<script>
	var w = window.innerWidth;
	var h = window.innerHeight;
	var rand = Math.floor(Math.random() * 100);
	while (rand--) {
		document.body.insertAdjacentHTML('beforeend', '<div class="cl'+rand+'" style="top:'+Math.floor(Math.random()*h*0.9)+'; left:'+Math.floor(Math.random()*w*0.85)+'; width:'+Math.floor(Math.random() * 100)+'px;"></div>');
		document.querySelector('style').innerHTML += '.cl'+rand+':after{	content: "\\f1'+rand+'"; font-family: FontAwesome; font-size: '+Math.floor(Math.random() * 100)+'px; color: #'+Math.floor(Math.random() * 4095).toString(16)+'}';
	}
	</script>
</body>
</html>

Sokoljr · #6 (**permalink**) 09.08.2017, 16:21

j0hnik,
Спасибо!

Форум

Справочник

Discord чат

Курсы javascript