Хаотическое создание элементов в элементе
Добрый вечер, кто может подсказать или дать ресурс какой-то, я хочу реализовать блок, в котором будут находится иконки, разных размеров, и раскиданы по элементу в разных частях, в хаотическом порядке
На ум пока ничего не приходит, разве что создать массив элементов и каждому элементу присваивать свойства, но все равно не понятно Заранее спасибо |
Если список элементов уже есть, то нужно просто пробежаться по каждому из них и задать css свойства position - absolute, top и left рандомно.
А если элементов нет, то создать их и сделать тоже самое. https://javascript.ru/math.random |
Nexus,
попробую, спасибо |
|
если нужны определенные иконки или картинки, нужно будет создать массив, или дать им имя числом а потом доставать при помощи переменной.
<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>
|
j0hnik,
Спасибо! |
| Часовой пояс GMT +3, время: 15:44. |